MACROMEDIA DREAMWEAVER 8-EXTENSION DE DREAMWEAVER - Développement Web

DREAMWEAVER 8-EXTENSION DE DREAMWEAVER - Développement Web MACROMEDIA - Notice d'utilisation et mode d'emploi gratuit

Retrouvez gratuitement la notice de l'appareil DREAMWEAVER 8-EXTENSION DE DREAMWEAVER MACROMEDIA au format PDF.

📄 528 pages Français FR Télécharger 💬 Question IA 10 questions ⚙️ Specs
Notice MACROMEDIA DREAMWEAVER 8-EXTENSION DE DREAMWEAVER - page 2
Choisissez votre langue et indiquez votre email : nous vous enverrons une version traduite specifiquement.
Type de produit Extension pour logiciel de développement Web
Fonctionnalités principales Personnalisation de l'interface, création d'extensions (objets, commandes, menus, panneaux), API JavaScript et C, gestion des bibliothèques de balises, traducteurs de données, rapports de site, comportements serveur, formats de serveur, modèles de serveur
Version Dreamweaver 8
Éditeur Macromedia, Inc.
Langue du manuel Français
Nombre de pages 528
Configuration requise Système d'exploitation multi-utilisateurs (Windows 2000/XP, Mac OS X) ; Dreamweaver 8 installé ; connaissances en JavaScript, HTML, XML, et langages serveur (ASP, PHP, JSP, ColdFusion)
Formats pris en charge Extensions .mxp, fichiers HTML, XML, VTML, JavaScript
Entretien et mises à jour Via Extension Manager ; téléchargement depuis Macromedia Exchange
Documentation incluse Guide complet de l'API et de la création d'extensions, exemples, didacticiels

FOIRE AUX QUESTIONS - DREAMWEAVER 8-EXTENSION DE DREAMWEAVER MACROMEDIA

Comment installer une extension Dreamweaver ?
Téléchargez d'abord Extension Manager depuis le site Macromedia. Connectez-vous à Macromedia Exchange, sélectionnez l'extension, téléchargez le fichier .mxp et enregistrez-le dans le dossier Downloaded Extensions de Dreamweaver 8. Depuis Dreamweaver, allez dans Commandes > Gérer les extensions pour lancer Extension Manager, puis Fichier > Installer extension. Redémarrez Dreamweaver si nécessaire.
Quels sont les prérequis pour créer une extension ?
Vous devez maîtriser JavaScript, HTML et XML. Pour les extensions C, des connaissances en C et en création de DLL sont nécessaires. Pour les extensions serveur, maîtrisez au moins un langage serveur (ASP, PHP, JSP, ColdFusion).
Comment personnaliser la barre d'outils Insérer ?
Modifiez le fichier de définition de la barre Insérer (fichier HTML dans le dossier Configuration/Objects). Vous pouvez réorganiser les objets, créer de nouveaux onglets ou ajouter de nouveaux objets en modifiant les fichiers correspondants.
Où sont stockés les profils de navigateur ?
Les profils de navigateur se trouvent dans le dossier Configuration/BrowserProfiles du dossier d'application Dreamweaver. Vous pouvez les modifier ou en créer de nouveaux à l'aide d'un éditeur de texte en respectant le format spécifique décrit dans le manuel.
Comment ajouter un nouveau type de document dans Dreamweaver ?
Modifiez le fichier MMDocumentTypes.xml dans Configuration/DocumentTypes ou créez un nouveau fichier de définition. Spécifiez les attributs comme id, servermodel, internaltype, winfileextension, etc. Redémarrez Dreamweaver.
Puis-je créer des extensions en langage C ?
Oui. Dreamweaver prend en charge les extensions C via des bibliothèques de liens dynamiques (DLL). Vous devez implémenter les fonctions de l'API d'extension C décrites au chapitre 21. Utilisez JavaScript pour appeler ces fonctions C.
Comment tester une extension après création ?
Placez les fichiers de l'extension dans les dossiers appropriés du dossier Configuration (par exemple, Commands, Objects, etc.). Redémarrez Dreamweaver. Testez la fonctionnalité dans l'interface. Utilisez le Guide des API de Dreamweaver pour vérifier les fonctions.
Qu'est-ce qu'un traducteur de données et comment en créer un ?
Un traducteur de données permet à Dreamweaver de reconnaître et d'afficher correctement des balises non HTML (comme les balises serveur). Pour en créer un, vous devez implémenter l'API du traducteur de données, spécifier les attributs à traduire et gérer le verrouillage des blocs de code.
Comment gérer les extensions dans un environnement multi-utilisateurs ?
Dans les systèmes multi-utilisateurs (Windows 2000, XP, Mac OS X), Dreamweaver copie les fichiers de configuration dans un dossier personnel. Pour personnaliser, modifiez les fichiers dans votre dossier de configuration utilisateur. Pour installer des extensions pour tous les utilisateurs, vous devez disposer des droits administrateur et utiliser Extension Manager.
Où trouver de l'aide supplémentaire pour créer des extensions ?
Consultez le site Macromedia Exchange (www.macromedia.com/go/exchange_fr) pour des extensions prêtes à l'emploi et des ressources. Rejoignez le forum de discussion sur l'extensibilité de Dreamweaver à l'adresse www.macromedia.com/go/extending_newsgrp. Le Guide des API de Dreamweaver complète ce manuel.

Questions des utilisateurs sur DREAMWEAVER 8-EXTENSION DE DREAMWEAVER MACROMEDIA

0 question sur cet appareil. Repondez a celles que vous connaissez ou posez la votre.

Poser une nouvelle question sur cet appareil

L'email reste privé : il sert seulement à vous prévenir si quelqu'un répond à votre question.

Aucune question pour l'instant. Soyez le premier à en poser une.

Téléchargez la notice de votre Développement Web au format PDF gratuitement ! Retrouvez votre notice DREAMWEAVER 8-EXTENSION DE DREAMWEAVER - MACROMEDIA et reprennez votre appareil électronique en main. Sur cette page sont publiés tous les documents nécessaires à l'utilisation de votre appareil DREAMWEAVER 8-EXTENSION DE DREAMWEAVER de la marque MACROMEDIA.

MODE D'EMPLOI DREAMWEAVER 8-EXTENSION DE DREAMWEAVER MACROMEDIA

1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breeze, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev et WebHelp sont soit des marques de commerce, soit des marques déposées de Macromedia, Inc. qui peuvent être déposées aux États-Unis ou sous toute autre juridiction. Les autres noms de produits, logos, graphiques, mises en page, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques, des marques de service ou des noms de marque apparentant à Macromedia, Inc. ou à d'autres entités et peuvent être déposées dans certains pays, états ou provinces.

Informations de tiers

Ce manuel contient des liens vers des sites Web tiers qui ne sont pas contrôlés par Macromedia et Macromedia ne peut en aucune cas être tenu responsable du contenu de ces sites. Si vous accédez à l'un de ces sites, vous le faites à vos propres risques. Macromedia propose ces liens dans un but pratique uniquement et ne peut en aucun cas endosser ou accepter la responsabilité du contenu de ces sites tiers.

Navigateur Opera * Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.

Copyright © 2005 Macromedia, Inc. Tous droits réservés. Le présent manuel ne doit faire l'objet d'aucune copie, photocopie, reproduction, traduction ou conversion sous quelque forme que ce soit, électronique ou lisible par machine, sans le consentement écrit de Macromedia, Inc. Nonobstant ce qui précède, le propriétaire ou l'utilisateur autorisé d'une copie valide du logiciel avec lequel le présent manuel a été fourni peut imprimer un exemplaire de ce manuel, à partir d'une version électronique de celui-ci, aux fins exclusives d'apprendre à utiliser ledit logiciel, pour autant qu'aucune partie du manuel ne soit imprimée, reproduite, distribuée, revendue ou transmise à toute autre fin, y compris de manière non exhaustive des fins commerciales telles que la vente d'exemplaires de cette documentation ou la fourniture de services d'assistance payants.

Remerciements

Gestion du projet : Charles Nadeau, Robert Berry

Réduction : Anne Sandstrom

Mise en forme: Anne Szabla, John Hammett

Gestion de la production et de l'édition : Patrice O'Neill et Rosana Francescato

Conception et production : Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel, Arena Reed, Mario Reynoso

Gestion de la localisation : Melissa Baerwald

Remerciements particuliers à Jay London, Raymond Lim, Alain Dumesny, Masayo Noda, Kristin Conradi, Yuko Yagi, ainsi qu'à tous les membres des équipes techniques et d'assurance qualité de Dreamweaver.

Première édition : septembre 2005

Macromedia, Inc.

601 Townsend St.

San Francisco, CA 94103

Table des matières

Arriere-plan 9

Installation d'une extension 10

Création d'une extension 10

Ressources supplémentaires pour les créateurs d'extensions. 11

Nouveautés de Dreamweaver 11

Conventions utilisées dans ce manuel. 13

Chapitre 1: personalisation de dreamweaver. 17

Techniques de personnalisation de Dreamweaver 17

Personnalisation de Dreamweaver dans un environnement multi-utilisateurs 29

Utilisation des profils de navigateurs 32

Modification des mappings FTP 36

Types de documents extensibles dans Dreamweaver. 37

Chapitre 2: personnalisation du mode CODE 59

Indicateurs de code 59

Coloration du code 67

Validation du code 98

Modification du formatage HTML par défaut. 101

Chapitre 3: extension de dreamweaver 105

Types d’extensions Dreamweaver 106

Extensions et dossiers de configuration 109

API d'extension 112

Localisation d'une extension 114

Utilisation de Extension Manager 116

Chapitre 4: interfaces utilisateur destinées aux extensions...117

Conception d'une interface utilisateur d'extension 117

Commande de rendu HTML de Dreamweaver. 118

Utilisation de commandes d'interface utilisateur personnalisées dans les extensions 120

Ajout de contenu Flash à Dreamweaver. 130

Chapitre 5: modèle d'objet de document (DOM)

Dreamweaver 133

De quel document parlons-nous? 134

DOM Dreamweaver 134

Chapitre 6: objets de la barre insérer 147

Fonctionnement des fichiers d'objet 148

Fichier de définition de la barre Insérer. 149

Modification de la barre Insérer 156

Exemple simple d'insertion d'un objet. 159

API des objets 171

Chapitre 7: commandes. 177

Fonctionnement des commandes 177

Ajout de commandes au menu Commandes. 178

Exemple de commande simple 179

API des commandes 186

Chapitre 8: menu et commandes de menu 191

Modification des menus et commandes de menu 201

Commande des menu. 205

Exemple de commande de menu simple 209

Exemple de menu dynamique. 213

API des commandes de menu 220

Chapitre 9: barres d'outils 227

Fonctionnement des barres d'outils 227

Fichier de commandes de barre d'outils simple 230

Fichier de définition de la barre d'outils 233

Balises d'éléments de barre d'outils 238

Attributs de balises d'éléments 244

API de commande de la barre d'outils 251

Chapitre 10 : Rapports 261

Rapports de site 261

Rapports d'autonomie 265

API de rapportes 268

Chapitre 11: Bibliothèques et éditeurs de balises 273

Format de fichier bibliothèque de balises 274

Sélecteur de balises 280

Exemple simple de création d'un éditeur de balise 282

API de l'éditeur de balises. 287

Chapitre 12 : Inspecteurs de propriétés 291

Fonctionnement des fichiers d'inspecteur de propriétés. 293

Exemple simple d'inspecteur de propriétés 294

API de l'inspecteur de propriétés 297

Chapitre 13: Panneaux flottants. 301

Fonctionnement des fichiers de panneau flottant. 302

Exemple de panneau flottant simple 303

API du panneau flottant. 309

Chapitre 14 : Comportements 317

Fonctionnement des comportements 318

Exemple de comportement simple. 320

API de comportements 325

Chapitre 15 : Comportements de serveur 335

Architecture de Dreamweaver 336

Exemple de comportement de serveur simple. 339

Comment appeler les fonctions de l'API de comportement de serveur 341

API de comportement de serveur 344

Fonctions d'implémentation des comportements de serveur.......350

Modification des fichiers EDML 353

Balises de fichiers EDML Groupe 356

Fichiers EDML Participant. 363

Techniques de comportements du serveur 387

Chapitre 16 : Sources de données 397

Fonctionnement des sources de données 398

Exemple simple de source de données 400

API des sources de données. 409

Chapitre 17: Formats de serveur 417

Fonctionnement du formatage de données 418

Mise en service des fonctions de formatage de données. 420

API de formats de serveur 421

Chapitre 18: Composants 425

Composants de base 425

Extension du panneau Composants 426

Personnalisation du panneau Composants 427

Fichiers du panneau Composants 427

Fonctions de l'API du panneau Composants 431

Chapitre 19 : Modèles de serveur 443

Fonctionnement de la personnalisation des modèles de serveur... 443

Fonctions de l'API des modèles de serveur. 444

Chapitre 20 : Traducteurs de données 453

Fonctionnement des traducteurs de données 454

Choix du type de traducteur 455

Ajout d'un attribut traduit à une balise 455

Contrôle des attributs traduits. 457

Verrouillage des balises ou des blocs de code traduits. 458

Création d'inspecteurs de propriétés pour contenu verrouillé.... 459

Recherche de bogues dans le traducteur. 462

Exemple de traducteur d'attributs simple. 463

Exemple de traducteur de blocs/balises simple 467

API du traducteur de données 472

Chapitre 21 : Extensions C. 477

Intégration des fonctions C 477

Extensions C et interpréteur JavaScript. 479

Types de données 480

API d'extension C 481

API de configuration multiutilisateur et d'accès aux fichiers 490

Appel d'une fonction C à partir de JavaScript 499

Annexe : Dossier Shared 505

Contenu du dossier Shared 505

Utilisation du dossier Shared 514

Index 517

Ce guide décrit l'API (interface de programmation d'application) et la plate-forme Macromedia Dreamweaver 8 qui vous permettent de créer des extensions de Dreamweaver. Il contient des informations sur le fonctionnement de chaque type d'extension, les fonctions API appelées par Dreamweaver pour mettre en œuvre les divers objets, menus, panneaux flottants, comportements de serveur, etc. qui composent Dreamweaver, ainsi qu'un exemple simple de chaque type d'extension. Il explique également comment personnaliser Dreamweaver en modifiant des balises dans divers fichiers HTML et XML pour ajouter des éléments de menu, des types de documents, etc.

Pour ajouter un objet, un menu, un panneau flottant ou toute autre fonctionnalité à Dreamweaver, vous devez encoder les fonctions requises par le type d'extension désirée. Ce guide décrit les arguments transmis par Dreamweaver à ces fonctions, ainsi que les valeurs attendues en retour par le programme.

Pour plus d'informations sur l'utilité et les possibilités offertes par les API JavaScript, utilisables pour effectuer diverses opérations dans vos extensions Dreamweaver, voir le Guide des API de Dreamweaver. Si vous envisagez de créer des extensions fonctionnant avec des bases de données, vous pouvez également consulter les sections du manuel Bien démarrer avec Dreamweaver consacrées aux connexions de bases de données.

Arrière-plan

La plupart des extensions Dreamweaver sont rédigées en langage HTML et en langage JavaScript. Les instructions générées ici supposent que vous possédez une bonne maîtrise des éléments suivants : Dreamweaver et programmation JavaScript, HTML et XML. Par ailleurs, si vous implémentez des extensions C, vous devez savoir comment créer et utiliser des bibliothèques de liens dynamiques (DLL) C. Pour rédiger vos propres extensions afin de créer des applications Web, vous devez connaître les langages de script côté serveur et au moins l'une des plates-formes suivantes : Active Server Pages (ASP), ASP.NET, PHP: Hypertext Preprocessor (PHP), Macromedia ColdFusion ou Java Server Pages (JSP).

Installation d'une extension

Pour vous familiariser avec la procédure de réduction d'extensions, vous pouvez, si vous le souhaitez, consulter les extensions ainsi que les ressources disponibles sur le site Web de Macromedia Exchange (http://www.macromedia.com/go/exchange_fr). L'installation d'une extension existante vous permet de découvrir quelques-uns des outils qui vous seront utiles pour travailler avec vos propres extensions.

Pour installer une extension, procédez de la manière suivante :

  1. Téléchargez Extension Manager à partir du site Web des téléchargements de Macromedia (http://www. macromedia. com/fr/software/downloads/), puis installez-le.
  2. Connectez-vous au site Web de Macromedia Exchange (http://www.macromedia.com/go/exchange_fr).
  3. Sélectionnez l'extension que vous souhaitez récapurer parmi celles disponibles. Cliquez sur le lien de téléchargement pour télécharger le propxiciel d'extension.
  4. Enregistrez le programme d'extension dans le dossier Downloaded Extensions de votre dossier Dreamweaver 8.
  5. Depuis Dreamweaver, CHOISSEZ Commandes > Gérer les extensions pour lancer Extension Manager, puis dans Extension Manager, CHOISSEZ Fichier > Installer extension. Extension Manager installe automatiquement l'extension dans Dreamweaver, depuis le dossier Downloaded Extensions.

Il est nécessaire de redémarrer Dreamweaver avant de pouvoir utiliser certaines extensions. Si Dreamweaver est en cours d'exécution pendant l'installation de l'extension, il vous sera peut-être demandé de fermer et de redémarrer l'application avant de poursuivre l'installation.

Pour afficher des informations de base sur l'extension à la suite de son installation, depuis Dreamweaver, ouvrez Extension Manager (Commandes > Gérer les extensions).

Création d'une extension

Avant de créer une extension Dreamweaver, consultez le site Web de Macromedia Exchange (www.macromedia.com/go/exchange_fr) pour vérifier que l'extension n'est pas encore. Si aucune extension existante ne répond à vos besoins, procédez comme suit pour en créer une :

Determine le type d'extension à créer. Pour plus d'informations sur les types d'extension, voir Types d'extensions Dreamweaver, page 106. - Recherche dans la documentation le type d'extension que vous souhaitez créer. Pour vous familiariser avec la procédure de création du type d'extension requis, il est recommandé de créer l'exemple d'extension simple en vous reportant au chapitre correspondant.

Determinez les fichiers à modifier ou à créer. Le cas échéant, planifiez l'interface utilisateur requise pour l'extension. - Créez les fichiers requis et enregistrez-les dans les dossiers appropriés. Redémarrez Dreamweaver pour qu'il reconnaisse la nouvelle extension. Testez l'extension. - Empaquetez l'extension pour pouvoir la partager avec d'autres utilisateurs. Pour plus d'informations, consultez la section Utilisation de Extension Manager, page 116.

Ressources supplémentaires pour les créateurs d'extensions

Pour entrer en contact avec d'autres développeurs, vous pouvez rejoindre le forum de discussion consacré à l'extensibilité de Dreamweaver. Pour ce faire, il vous suffit de vous rendre à l'adresse suivante: www.macromedia.com/go/extending_newsgrp.

Nouveautés de dreamweaver

Dreamweaver 8 comprend les nouvelles fonctionnalités et interfaces extensibles suivantes. À chacune de ces fonctionnalités correspond des nouvelles fonctions, répertoriées dans le Guide des API de Dreamweaver.

Synchronisation améliorée des sites

La comparaison des fichiers locaux et distants est plus fiable dans Dreamweaver 8.

Enrichissements apportés aux fonctions de copie et collage

Les options de copie et collage ont été simplifiées. Les utilisateurs peuvent maintenant régler le comportement par défaut d'une opération de collage sur texte uniquement.

Le mappage des liens relatifs à la racine du site a été amélioré.

Affichage du code

Dreamweaver permet maintenant aux utilisateurs de réduire ou de développer sélectivement les segments de code.

  • Barre d'outils en mode Code

En mode Code, Dreamweaver propose maintenant une barre d'outils assurant un accès rapide aux commandes fréquemment utilisées.

Transfert de fichiers en arrière-plan

Les utilisateurs peuvent désormais continuer à travailler dans Dreamweaver pendant le traitement des tâches associées au serveur.

Intégration de fonctions de comparaison de fichiers

Dreamweaver permet maintenant aux utilisateurs de lancer une application de comparaison de fichiers pièce, qui compare deux fichiers locaux, deux fichiers distants ou les versions locale et distante d'un fichier.

Prise en charge rationalisée des styles CSS

Les styles CSS et les panneaux CSS correspondants ont été combinés. Le panneau de création s'appelle maintenant CSS, le panneau Styles CSS s'intitule désormais Styles. Le menu Fenêtre comprend à présent une option associée aux styles CSS de document et de sélection. Un bouton Modifier une règle a été intégré à l'inspecteur de propriétés.

Assistances visuelles associées aux DIV et calques CSS.

Dreamweaver comprend maintenant des assistances visuelles permettant aux utilisateurs d'afficher leur mise en page CSS.

Zoom avant et arrêté

Dreamweaver permet désormais aux utilisateurs d'effectuer un zoom avant ou arrêté sur leurs pages Web.

Guides

Dreamweaver permet maintenant aux utilisateurs de créer des guides dans leurs documents.

Changements dans la documentation

Extension de Dreamweaver a été enrichie comme suit pour aider les créateurs novices à se familiariser avec les extensions.

Exemples nouveaux et mis à jour

De nouveaux exemples de rapports et de comportements ont été ajoutés. L'exemple relatif aux inspecteurs de propriétés a été amélioré. La procédure de création de chaque type d'extension est présentée comme un didacticiel, qui vous permet de comprendre le rôle des fichiers et leurs interactions.

Nouvelle organisation

Chaque chapitre débute à présent par un tableau qui répertorie les fichiers requis pour créer le type d'extension décrit.

Pour plus d'informations sur les nouvelles fonctions ajoutées à l'API d'utilitaire ou à l'API JavaScript, voir le Guide des API de Dreamweaver.

Approfondissez votre connaissance de Dreamweaver grâce aux ouvrages de Macromedia Press. Pour connaître les derniers ouvrages rédigés par des experts, rendez-vous à l'adresse www.macromedia.com/go/dw2004_help_mmp.

Fonctions supprimées

Diverses fonctions ont été supprimées de Dreamweaver 8. Pour plus d'informations sur les fonctions éliminées de l'API d'utilitaire et de l'API JavaScript, voir le Guide des API de Dreamweaver.

Errata

Vous trouverez une liste des problèmes connus dans la section Extensibility (Extension) du centre de support de Dreamweaver (www.macromedia.com/go/extending_errata).

Conventions utilisées dans ce manuel

Ce manuel utilise les conventions typographiques suivantes :

  • La police de code indique des fragments de code et des constantes d'API, notamment des noms de classe, des noms de méthodes, des noms de fonctions, des noms de type, des scripts, des instructions SQL et des noms de balises et d'attributs HTML et XML. La police de code en italique identifie les éléments replacables dans le code. Le symbole de continuation () indique qu'une longue ligne de code a été fractionnée sur deux lignes ou plus. En raison des limites de marge du format de ce guide, une ligne de code continue doit ici être coupée. Lorsque vous copiez les lignes de code, supprimez le symbole de continuation et entrez-les comme une seule ligne.
  • Les accolades placées avant et après un argument de fonction indiquent que cet argument est facultatif.
  • Vous pouvez remplacer le préfixe dreamweaver. présent dans le nom de certaines fonctions (par exemple, dreamweaver. funcname) par dw. (dw. funcname) lorsque vous rédigez du code. Ce manuel utilise le préfixe dreamweaver. compte dans les définitions de fonctions et dans l'index. De nombreux exemples utilisent néanmoins le préfixe court (dw.)

Conventions de noms utilisées dans ce manuel :

Vous—le développement responsable de la réduction des extensions

L'utilisateur — la personne utilisant Dreamweaver. Le visiteur — la personne qui visualise la page Web créée par l'utilisateur.

Personnalisation de dreamweaver

Vous pouvez personnaliser Macromedia Dreamweaver 8 pour l'adapter à vos besoins de développement Web, y compris modifier les paramètres dans des boîtes de dialogue, définir vos préférences dans divers domaines et modifier les raccourcis clavier. Vous pouvez en outre personnaliser les indicateurs et colorations de code en mode Code, le profil CSS (feuille de style en cascade) et la mise en forme HTML par défaut de Dreamweaver.

Chapitre 1 : Personnalisation de Dreamweaver 17

Chapitre 2 : Personnalisation du mode Code..59

Personnalisation de dreamweaver

Outre créé et utiliser des extensions Dreamweaver, vous pouvez personnaliser Dreamweaver de différentes manières afin de l'adapter au moins à vos besoins.

Techniques de personnalisation de dreamweaver

Il existe plusieurs approches pour personnaliser Dreamweaver. Certaines sont présentées dans Utilisation de Dreamweaver. Ces approches vous permettent de personnaliser l'espace de travail. Vous pouvez également modifier les paramètres dans les boîtes de dialogue de Dreamweaver. Vous pouvez définir des préférences dans divers domaines (accessibilité, coloration du code, polices, surbrillance et prévisualisation dans un navigateur), à l'aide du panneau Préférences (Édition > Préférences). Vous pouvez également modifier les raccourcis clavier à l'aide de l'éditeur de raccourcis clavier (Édition > Raccourcis clavier).

La liste suivante présente les diverses méthodes permettant de personnaliser Dreamweaver par la modification des fichiers de configuration :

  • Modifier l'ordre des objets dans la barre Insérer, créer de nouveaux onglets pour réorganiser les objets ou ajouter de nouveaux objets. Voir Modification de la barre Insérer, page 156.
  • Changer le nom des éléments de menu, ajouter de nouvelles commandes aux menus et supprimer des commandes existantes des menus. Voir Chapitre 8, "Menu et commandes de menu," page 191.
  • Modifier les profils de navigateurs ou en créer de nouveaux. Voir Utilisation des profils de navigateurs, page 32.
  • Modifier l'affichage des balises propriétaires (balises ASP et JSP comprises) dans la fenêtre de document en mode Création. Voir Personnalisation de l'interprétation de balises propriétaires, page 21.

Vous pouvez en outre adapter Dreamweaver à vos besoins en procédant comme suit :

Personnalisation de documents par défaut Personnalisation de conceptions de pages Personnalisation de l'aspect des boîtes de dialogue Modification du type de fichier par défaut Personnalisation de l'interprétation de balises propriétaires Personnalisation des présentations de l'espace de travail Personnalisation de la barre d'outils Mode Code

Personnalisation de documents par défaut

Le dossier DocumentTypes/NewDocuments contient, par défaut, un document (vierge) de chaque type de document que vous pouvez créer à l'aide de Dreamweaver. Lorsque vous créez un nouveau document vierge en sélectionnant Fichier > Nouveau et en sélectionnant un élément dans les listes Page de base, Page dynamique ou Autres catégories, Dreamweaver base le nouveau document sur le document par défaut correspondant dans ce dossier. Pour modifier les éléments par défaut d'un type de document donné, modifier le document correspondant dans ce dossier.

Remarque

Si vous souhaitez que toutes les pages de votre site contiennent certains éléments communs (par exemple une mention sur le copyright) ou une présentation constante, il est préférable d'utiliser des modèles et des éléments de bibliothèque que de changer les documents par défaut. (Pour plus d'informations sur les modèles et les éléments de bibliothèque, voir Utilisation de Dreamweaver.)

Personnalisation de conceptions de pages

Dreamweaver propose divers éléments prédéfinis : feuilles de style CSS, modèles et conceptions de pages. Vous pouvez créer des pages basées sur ces conceptions en cliquant sur Fichier > Nouveau.

Pour personnaliser les conceptions disponibles, modifier les fichiers présents dans les dossiers BuiltIn/css, BuiltIn/frameworks, BuiltIn/Templates et BuiltIn/TemplatesAccessible

Remarque

Les conceptions répertoriées dans les catégories Conception de page et Conception de page (Accessibility) sont les fichiers modèles de Dreamweaver. Pour plus d'informations sur les modèles, voir Utilisation de Dreamweaver.

Vous pouvez également créer des conceptions de pages en ajoutant des fichiers dans les sous-dossiers du dossier BuiltIn. Pour qu'une description du fichier s'affiche dans la boîte de dialogue Nouveau document, créez un fichier Design Notes (dans le dossier _notes approprié) correspondant au fichier de conception de page.

Personnalisation de l'aspect des boîtes de dialogue

La mise en forme des boîtes de dialogue pour les objets, les commandes et les comportements sont définis comme des formulaires HTML. Ils seront dans des fichiers HTML du dossier Configuration au sein du dossier d'application Dreamweaver. Ces formulaires peuvent être modifiés comme tout autre formulaire Dreamweaver. Pour plus d'informations, voir Utilisation de Dreamweaver.

Remarque

N'oubliez pas que, dans un système d'exploitation multiutilisateur, vous devez modifier les copies des fichiers de configuration contenues dans votre dossier de configuration utilisé uniquement que les fichiers Configuration de Dreamweaver. Pour plus d'informations, consultez la section Dossiers de configuration multiutilisateur, page 111.

Pour modifier l'aspect d'une boîte de dialogue :

  1. Dans Dreamweaver, Sélectionnez Édition > Préférences, puis la catégorie Correction du code.
  2. Désélectionnez l'option Renommer les éléments de formulaire lors du collage. Cette opération vous assure que les éléments de formulaire conserveront leur nom original une fois copiés et collés.
  3. Cliquez sur OK pour fermer la boîte de dialogue Préférences.
  4. Sur votre disque, localisez le fichier HTM approprié dans le dossier Configuration/Objects, Configuration/Commands ou Configuration/Behaviors.
  5. Faites une copie du fichier dans un dossier autre que le dossier Configuration.
  6. Ouvrez cette copie dans Dreamweaver, modifiez le formulaire et enregistrez le document.
  7. Quittez Dreamweaver.
  8. Copiez le fichier modifié à la place de l'original dans le dossier Configuration. Il est toutefois conseillé de conserver une sauvegarde du fichier original pour pouvoir l'utiliser à nouveau en cas de besoin.
  9. Redémarrez Dreamweaver pour constater les changements.

Il est recommandé de ne modifier que l'aspect de la boîte de dialogue et non son fonctionnement. Le type des éléments de formulaire doit être identique, tout comme les noms, afin que l'information obtenue par Dreamweaver à partir de la boîte de dialogue puisse être utilisée de la même manière.

Par exemple, l'objet Commentaire prend le texte entre dans une zone de texte de boîte de dialogue et utilise une fonction JavaScript simple pour transformer ce texte en commentaire HTML et l'insérer dans votre document. Le formulaire qui décrit la boîte de dialogue se trouve dans le fichier Comment.htm dans le dossier Configuration/Objects/Invisibles. Vous pouvez ouvrir ce fichier et modifier la taille ou d'autres attributs dans la zone de texte, mais si vous supprimez intégralement la balise textarea ou que vous modifiez la valeur de son attribut name, l'objet Commentaire ne fonctionne plus correctement.

Modification du type de fichier par défaut

Par défaut, Dreamweaver affiche tous les types de fichiers reconnus dans la boîte de dialogue Fichier > Ouvrir. Vous pouvez utiliser un menu contextuel dans cette boîte de dialogue pour limiter l'affichage de certains types de fichiers. Si la plupart de vos travaux impliquent un type de fichier spécifique (par exemple, les fichiers ASP), vous pouvez modifier l'affichage par défaut. Le type de fichier indiqué sur la première ligne du fichier Extensions.txt de Dreamweaver devient le type par défaut.

Remarque

Pour afficher tous les types de fichiers dans la boîte de dialogue Fichier > Ouvrir (y compris les fichiers que Dreamweaver ne peut pas ouvrir), vous devez désigner l'extension des fichiers (*). Ceci n'est pas identique à Tous les documents, qui ne répertorie que les fichiers que Dreamweaver peut ouvrir.

Pour modifier le type de fichier par défaut de dreamweaver dans fichier > ouvrir :

  1. Créez une copie de sauvegarde du fichier Extensions. txt dans le dossier Configuration.
  2. Ouvrez le fichier Extensions. txt dans Dreamweaver ou dans un éditeur de texte.
  3. Coupez la ligne correspondant au nouveau type par défaut et collez-la en tête du fichier, en première ligne.
  4. Enregistrez le fichier.
  5. Redémarrez Dreamweaver.

Pour voir le nouveau type par défaut, sélectionnez Fichier > Ouvrir, puis examinez le menu contextuel de types de fichiers.

Pour ajouter de nouveaux types de fichier dans le menu de la boite de dialogue fichier > ouvrir :

  1. Créez une copie de sauvegarde du fichier Extensions. txt dans le dossier Configuration.
  2. Ouvrez le fichier Extensions. txt dans Dreamweaver ou dans un éditeur de texte.
  3. Ajoutez une nouvelle ligne pour chaque nouveau type de fichier.

a. Tapez en majuscules les extensions de fichier gérées par le nouveau type de fichier, en les séparant par une virgule. b. Ajoutez le signe deux points et une brève description, qui apparaitra dans le menu contextuel de types de fichiers associé à la boîte de dialogue qui s'affiche lorsque vous sélectionnez Fichier > Ouvrir.

Par exemple, pour les fichiers JPEG, entrez les informations suivantes :

JPG, JPEG, JFIF: Fichiers image JPEG

  1. Enregistrez le fichier.
  2. Redémarrez Dreamweaver.

Pour observer les modifications, sélectionnez Fichier > Ouvrir, puis cliquez sur le menu contextuel de types de fichiers.

Personnalisation de l'interprétation de balises propriétaires

Les technologies côté serveur telles que ASP, Macromedia ColdFusion, JSP et PHP utilisent du code spécial non HTML au sein des fichiers HTML. Les serveurs créent et seront du contenu HTML basé sur ce code. Lorsque Dreamweaver rencontre des balises non HTML, il les compare aux informations contenues dans les fichiers de balises propriétaires, lesquels définissent essentiellement comment dire et afficher ces balises non HTML.

Par exemple, les fichiers ASP contiennent (oultre le code HTML habituel) du code ASP que le serveur doit interpréter. Le code ASP ressemble à une balise HTML, mais il est signalé par des délimiteurs : il commence par <% et s'arrête par %. Le dossier Configuration/ThirdPartyTags de Dreamweaver contient un fichier nommé Tags. xml. Ce fichier déscrit le format des diverses balises propriétaires, dont le code ASP, et déscrit comment Dreamweaver doit afficher ce code. La façon dont le code ASP est spécifique dans le fichier Tags. xml conduit Dreamweaver à ne pas tenter d'interpréter le code situé entre les délimiteurs. A la place, en mode Création, seule une icône indiquant la présence de code ASP s'affiche. Vos propres fichiers de données de balises peuvent définir l'affichage et la lecture de vos balises par Dreamweaver. Créez un nouveau fichier de données de balises pour chaque jeu de balises afin d'indiquer à Dreamweaver comment les afficher.

Remarque

Cette section vous explique comment définir l'affichage d'une balise personnalisée par Dreamweaver, mais ne décrit pas comment modifier le contenu ou les propriétés d'une balise personnalisée. Pour plus d'informations sur la création d'un inspecteur de propriétés permettant de vérifier et modifier les propriétés d'une balise personnalisée, voir Chapitre 12, "Inspecteurs de propriétés," on page 291.

Chaque fichier de données de balises définit le nom, le type, le modèle de contenu, le modèle de rendu et l'icone pour une ou plusieurs balises. Vous pouvez créer un nombre illimité de fichiers de données de balises, mais tous doivent se trouver dans le dossier Configuration/ThirdPartyTags afin d'être consultés et traités par Dreamweaver. Les fichiers de données de balises portent l'extension. xml.

Conseillé

Si vous travailliez sur plusieurs sites distincts à la fois (par exemple, en tant que développeur indépendant), vous pouvez regrouper toutes les spécifications de balises relatives à un site dans un fichier. Il suffit ensuite de remettre ce fichier de données de balises avec les icônes personnalisées et les inspecteurs de propriétés aux responsables qui seront le site.

Vous pouvez définir une spécification de balise à l'aide d'une balise XML nommée tagspec. Par exemple, le code suivant décrit les spécifications d'une balise nommée happy :

<tagspec tag_name="happy" tag_type="nonempty" renderContents="false" content_model="marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec> 

Vous pouvez définir deux types de balises à l'aide de tagspec :

  • Balises de type HTML standard. happy est un exemple de balise de type HTML standard. Elle débute par une balise d'ouverture happy, des données sont placées entre les balises d'ouverture et de fermeture, et elle se termine par une balise /happy de fermeture. Balises délimitées par des chaînes

Les balises déliminées par des chaînes débutent par une chaîne et se terminent par une autre chaîne. Elles se comportent comme des balises HTML vides (telle img), car elles n'entourent pas les données de balises et ne comportent pas de balises de fermeture. Si la balise happy était déliminée par des chaînes, les spécifications de balises incluaient les attributs start_string et end_string. Une balise ASP est une balise déliminée par des chaînes. Elle commence par la chaîne <% et se termine par la chaîne %>, sans balise de fermeture.

Les informations suivantes décrivent les attributs et les valeurs valides de la balise tagspec. Les attributs marqués d'un astérisque (*) sont ignorés dans le cadre des balises déliminées par des chaînes. Les attributs optionnels sont définis par des accolades ({}) dans la liste des attributs; les attributs ne comptant pas d'acc accolades sont donc requis.

Description

Fournit des informations à propos d'une balise propriétaire.

tag_name, {tag_type}, {render_Contents}, {content_model}, {start_string}, {end_string}, {detect_in_attribute}, {parse_attributes}, icon, icon_width, icon_height, {equivalent_tag}, {isvisual}, {server_model}

  • tag_name est le nom de la balise person compter la mention ASP sur la première ligne. Pour plus d'informations sur l'inspecteur de propriétés API, voir Chapitre 12, "Inspecteurs de propriétés," on page 291.
  • tag_type détermine si la balise est vide (telle que img) ou si un contenu est es par des chains). Cet élément est ignoré pour les balises délimitées par des chains, ces dernières étant toujours vides. Les valeurs valides sont "empty" et "nonempty".

■ render_contents déterminé si le contenu de la balise doit s'afficher en mode Création ou s'il est remplaced par l'icone spécifique. Cet attribut est requis pour les balises nonempty et n'est pas pris en compte pour les balises empty (les balises empty sont vides de contenu). Cet attribut ne s'a applique qu'aux balises affichées hors des attributs. Le contenu des balises imbriquées à l'intérieur des valeurs d'attributes d'autres balises n'est pas affchéé. Les valeurs valides sont "true" et "false". - content_model déscrit les différents types de contenu que la balise peutContainir et l'emplacement où la balise peut s'afficher dans un fichier HTML. Les valeurs valides sont "block_model", "head_model", "marker_model" et "script_model":

  • block_model spécifique que la balise peut contenir des éléments de niveau de bloc comme div et p et que la balise peut apparaître uniquement dans la section body ou dans d'autres balises au contenu body, telles que div, layer et td.
  • head_model spécifique que le contenu de la balise peut être composé de texte et que la balise peut uniquement apparaître dans la section HEAD.
  • marker_model spécifique que la balise peut contenir tout code HTML valide et peut se couvrir à tout endroit du fi ssez le modèle de contenu de la balise comme head_model au lieu de marker_model. Utilisez marker_model pour les balises qui doivent s'afficher en ligne (dans un élément de niveau de bloc, comme p ou div, par exemple, dans un paragraphe). N'utilisez pas ce modèle si la balise doit être affichée seule dans un paragraphe, encadrée par des sauts de ligne. script_model permet un emplacement libre de la balise entre les balises d'ouverture et de fermeture d'un document. Lorsque Dreamweaver rencontre une balise de ce modèle, il ignore totalement le contenu de la balise. Ce dernier est utilisé pour le marquage (comme certaines balises ColdFusion) que Dreamweaver ne doit pas analyser.
  • start_string spécifique un délimueur qui marque le début d'une balise déliminée par des chaînes. Les balises déliminées par des chaînes peuvent être générées en tout point du document pouvant contir un commentaire. Dreamweaver n'analyse pas les balises et ne décode pas les entités ou URL compris entre start_string et end_string. Cet attribut est requis si end_string est spécifique.

end_string spécifique un délimiteur qui marque la fin d'une balise déliminée par une chaîne. Cet attribut est requis si start_string est spécifique. - detect_in_attribute indique si les éléments contenus entre start_string et end_string (ou entre les balises d'ouverture et de fermeture si ces chaînes ne sont pas définies) doivent être ignorés même si ces chaînes apparaissent dans les valeurs ou noms d'attributs. Vous devez généralement régler la valeur sur "true" pour les balises déliminées par des chaînes. La valeur par défaut est "false". Ainsi, les balises ASP sont parfois imbriquées dans des valeurs d'attributs et contiennent parfois des guillemets ("). Parce que la balise ASP spécifique detect_in_attribute="true", Dreamweaver ne tient pas compte des balises ASP, y compris des guillemets internes, lorsqu'elles sont imbriquées dans des valeurs d'attributs. - parse_attributes indique si les attributs de la balise doivent être analysés. Si la valeur définie est "true" (par défaut), Dreamweaver analyse les attributs. Si elle est définie sur "false", Dreamweaver ignore tous les éléments jusqu'au crochet situé hors des guillemets. Par exemple, cet attribut doit être réglé sur "false" pour les balises telles que cfiif (par exemple,, que Dreamweaver ne peut pas analyser comme ensemble de paires nom d'attribut/ Valeur). - icon spécifique le chemin et le nom de fichier de l'icone associée à la balise. Cet attribut est requis pour les balises empty ainsi que pour les balises nonempty dont le contenu ne s'affiche pas dans la fenêtre de document en mode Création. - icon_width spécifique la largeur de l'icone en pixels. - icon_height spécifique la hauteur de l'icone en pixels. ■ équivalent_tag spécifique des équivalents HTML simples pour certaines balises liées à des formulaires ColdFusion. Ceci ne doit pas être utilisé avec d'autres balises. ■ isvisualindique sila balise a un impact visuel sur la page. Par exemple, la balise ColdFusion cfgraph ne spécifie aucune valeur pour isvisual; la valeur par defaut "true" est donc appliquée. La valeur isvisual de la balise ColdFusion cfset est definié sur false. La visibilité des balises de marquage de serveur est contrôlee par la catégorie Eléments invisibles dans la boîte de dialogue Préférences. La visibilité des balises de marquage de serveur visuel peut être définitie indépendamment de celle des balises de marquage de serveur non visuel.

server_model, si spécifique, indique que la balise tagspec s'applique uniquement aux pages appartenant au modèle de serveur spécifique. Si server_model n'est pas spécifique, la balise tagspec s'applique à toutes les pages. Par exemple, les délimiteurs des balises ASP et JSP sont identiques, mais la balise tagspec pour JSP spécifique un modèle de serveur "JSP". Par conséquent, lorsque Dreamweaver rencontre ce code avec les délimiteurs adéquats sur une page JSP, il affiche une icône JSP. Lorsque ce code est créé sur une page autre qu'une page JSP, une icône ASP s'affiche.

Contenu

Aucun (balise vide).

Contenant

Néant

Affichage des balises personnalisées dans le mode création

L'affichage des balises personnalisées dans la fenêtre de document en mode Création dépend des valeurs entrées pour les attributs tag_type et render_contents de la balise tagspec. (Voir Personnelisation de l'interprétation de balises propriétaires, page 21.) Si la valeur de tag_type est "empty", l'icône spécifiée dans l'attribut icon s'affiche. Si la valeur de tag_type est "nonempty" mais que la valeur de render_contents est "false", l'icône s'affiche de la même façon que pour une balise vide. L'exemple suivant indique comment une instance de la balise happy définie antérieurement peut apparaître dans le code HTML :

Parce que render_contents est régéle sur "false" dans la Specification de balise, le contenu de la balise happy (le mot Joe) ne s'affiche pas. Les balises de début et de fin et leur contenu sont alors remplacées par une icône unique.

Pour les balises nonempty dont la valeur render_contents est régée sur "true", l'icone ne s'affiche pas dans le mode Création. C'est le contenu inséré entre les balises d'ouverture et de fermeture qui s'affiche (par exemple, le texte contenu entre les balises dans Ceci est le contenu inséré entre les balises d'ouverture et de fermeture ). Si l'option Affichage > Éléments invisibles est activée, le contenu est mis en surbrillance à l'aide de balises propriétaires, comme spécifique dans les préférences de surbrillance (la mise en surbrillance ne s'applique qu'aux balises définies dans les fichiers de données de balises).

Pour modifier la couleur de surbrillance des balises propriétaires :

  1. Sélectionnez Édition > Préférences, puis la catégorie Surbrillance.
  2. Cliquez sur la zone de sélection de couleurs de balises propriétaires pour afficher le sélecteur de couleur.
  3. Sélectionnez une couleur, puis cliquez sur OK pour fermer la boîte de dialogue Préférences. Pour plus d'informations sur la sélection d'une couleur, voir Utilisation de Dreamweaver.

Comment éviter la modification de balises propriétaires

Dreamweaver corrige certains types d'erreurs dans le code HTML. Pour plus d'informations, voir Utilisation de Dreamweaver. Par défaut, Dreamweaver évite toute modification du code HTML dans les fichiers portant certaines extensions, comme .asp (ASP), .cfm (ColdFusion), .jsp (JSP) et .php (PHP). Ce paramètre est défini pour éviter toute modification accidentelle du code contenu dans de telles balises non HTML. Vous pouvez modifier le comportement de correction de Dreamweaver par défaut afin que le code HTML soit modifié lors de l'ouverture de tels fichiers. Vous pouvez également ajouter d'autres types de fichiers auxquels Dreamweaver n'apportera pas de modifications.

Dreamweaver encode certains caractères spéciaux en les remplaçant par des valeurs numériques lorsque vous les entrez dans l'inspecteur de propriétés. Il est normalement préférible de laisser Dreamweaver effectuer cet encodage car, ainsi, les caractères spéciaux seront reconnus par un nombre plus important de plates-formes et de navigateurs. Néanmoins, cette opération d'encodage peut interférer avec les balises propriétaires. Vous pouvez donc modifier le comportement de Dreamweaver concernant l'encodage des balises lorsque vous travailliez avec des fichiers comportant des balises propriétaires.

Pour permettre à dreamweaver de corriger le code HTML dans plus de types de fichiers :

  1. Sélectionnez Édition > Préférences, puis la catégorie Correction du code.
  2. Sélectionnez l'une des options suivantes :

Corriger les balises incorporement imbriquées et non fermées. Supprimer les balises de fermeture superflues.

  1. Procédez comme suit, au besoin :

Supprimez une ou plusieurs des extensions de la liste dans l'option Ne jamais corriger le code : Dans les fichiers avec extensions. Désélectionnez l'option Ne jamais corriger le code : Dans les fichiers avec extensions. La désactivation de cette option permet à Dreamweaver de réécrire le code HTML dans tous types de fichiers.

Pour ajouter des fichiers dans lesquels dreamweaver ne doit pas apporter de corrections :

  1. Sélectionnez Édition > Préférences, puis la catégorie Correction du code.
  2. Sélectionnez l'une des options suivantes :

Corriger les balises incorrectement imbriquées et non fermées. Supprimer les balises de fermeture superflues.

  1. Assurez-vous que l'option Ne jamais corriger le code : Dans les fichiers avec extensions est sélectionnée et ajoutez les nouvelles extensions de fichiers à la liste dans la zone de texte.

Si le nouveau type de fichier ne s'affiche pas dans le menu contextuel Types de fichiers dans la boîte de dialogue Fichier > Ouvrir, vous pouvez l'ajouter dans le fichier Configuration/Extensions.txt. Pour plus de détails, voir Modification du type de fichier par défaut, page 20.

Pour désactiver les options d'encodage de dreamweaver :

  1. Sélectionnez Édition > Préférences, puis la catégorie Correction du code.
  2. Désélectionnez les options de caractères spéciaux de votre choix.

Pour plus d'informations sur les autres préférences de correction de code, voir Utilisation de Dreamweaver.

Personnalisation de dreamweaver dans un environnement multi-utilisateurs

Vous pouvez personnaliser Dreamweaver dans un système d'exploitation multi-utilisateurs tel que Windows 2000, Windows XP ou Mac OS X. Aucune configuration personnalisée de Dreamweaver ne peut affecter celle d'un autre utilisateur. Pour ce faire, lors de la première exécution de Dreamweaver sous un système d'exploitation multiutilisateur reconnu, Dreamweaver copie divers fichiers de configuration dans un dossier Configuration utilisateur destiné à votre utilisation personnelle. Lorsque vous personnalisez Dreamweaver à l'aide des panneaux et boîtes de dialogue, l'application modifie vos fichiers de configuration utilisateur au lieu de modifier les fichiers de configuration de Dreamweaver. Pour personnaliser Dreamweaver en modifiant un fichier de configuration dans un environnement multiutilisateur, modifiez le fichier de configuration utilisateur correspondant au lieu de modifier les fichiers du dossier Configuration de Dreamweaver. Pour apporter une modification affectant la plupart des utilisateurs, vous pouvez modifier un fichier Configuration de Dreamweaver, mais les utilisateurs disposant déjà de fichiers de configuration personnels ne seront pas affectés. En général, si vous souhaitez apporter une modification affectant tous les utilisateurs, il est préférable de créer une extension et de l'instruire à l'aide de Extension Manager.

Sur des systèmes d'exploitation plus anciens (Windows 98, Windows ME et Mac OS 9. x), un seul groupe de fichiers de configuration de Dreamweaver est partagé par tous les utilisateurs, même si la configuration du système d'exploitation prend en charge plusieurs utilisateurs.

L'emplacement du dossier Configuration varie selon la plate-forme utilisée.

Les plate-formes Windows 2000 et Windows XP utilisent l'emplacement suivant :

lecteur. Documents and Settings\nom Utilisateur\Application

Data\Macromedia\Dreamweaver 8\Configuration

Sous Windows XP, ce dossier peut se cacher dans un dossier masqué.

Les plateformes Mac OS X utilisent l'emplacement suivant :

lecteur: Users/nom/utilisateur/Library/Application Support/Macromedia/Dreamweaver 8/Configuration

Remarquee

Pour installer des extensions accessibles à tous les utilisateurs dans un système d'exploitation multiutilisateur, vous devez disposer des droits Administrateur (Windows) ou root (Mac OS X).

Lorsque vous exécutez Dreamweaver pour la première fois, il ne copie que certains fichiers de configuration dans votre dossier de configuration utilisé. (les fichiers copiés sont spécifiés dans le fichier version. xml dans le dossier Configuration). Lorsque vous personnalisez Dreamweaver depuis l'application même (par exemple, lorsque vous modifiez un des fragments de code prédéfinis dans le panneau Fragments de code), Dreamweaver copie les fichiers concernés dans votre dossier de configuration utilisé. La version d'un fichier présent dans le dossier de configuration utilisé prime toujours sur celle du dossier Configuration de Dreamweaver. Pour personnaliser un fichier de configuration qui n'a pas été copié par Dreamweaver dans le dossier de configuration utilisé, copiez en premier lieu le fichier du dossier Configuration de Dreamweaver vers l'emplacement correspondant dans votre dossier de configuration utilisé. Modifiez ensuite cette copie dans votre dossier de configuration utilisé.

Suppression de fichiers de configuration dans un environnement multiutilisateur

Lors de toute opération engendrant l'effacement d'un fichier de configuration dans Dreamweaver sous un système d'exploitation multiutilisateur (par exemple, la suppression d'un fragment de code prédéfini dans le panneau Fragments de code), Dreamweaver crée un fichier nommé mm_deleted_files.xml dans votre dossier Configuration. Lorsqu'un fichier est répertorié dans le fichier mm_deleted_files.xml, Dreamweaver se comporte comme si le fichier n'existait plus.

Pour désactiver un fichier de configuration :

  1. Quittez Dreamweaver.
  2. A l'aide d'un éditeur de texte, modifiez le fichier mm_deleted_files. ichier en indiquant le chemin (relatif au dossier Configuration de Dreamweaver) du fichier de configuration à désactiver.

REMARQUE

Ne modifie pas le fichier mm_deleted_files.xml dans Dreamweaver.

  1. Enregistrez et fermez mm_deleted_files.xml.
  2. Lancez à nouveau Dreamweaver.

À propos de la syntaxe des balises mm_deleted_files. xml

Le fichier mm_deleted_files. xml contient une liste structurée d'éléments qui indiquent les fichiers de configuration que Dreamweaver doit ignorer. Ces éléments sont spécifiés par des balises XML, que vous pouvez modifier dans un éditeur de texte.

Les sections suivantes décrivent la syntaxe des balises du fichier mm_deleted_files.xml. Les attributs optionnels sont définis par des accolades ({}) dans la liste des attributs; les attributs ne comportant pas d'accolades sont donc requis.

Description

Balise de conteneur renfermant une liste d'éléments à considérer comme supprimés par Dreamweaver.

Néant

Contenu

Cette balise doit contenir une ou plusieurs balises item.

Contenant

Néant

<deletedItems>  
<!-- placez les balises item ici -->  
</deletedItems> 

Description

Définit un fichier de configuration à ignorer par Dreamweaver.

name

Chemin du fichier de configuration par rapport au dossier Configuration. Sous Windows, utilisez une barre oblique inversée (\) pour séparer les éléments constitutifs du chemin; sur Macintosh, utilisez deux points (:).

Contenu

Aucun (balise vide).

Contenant

Cette balise doit se trouver dans une balise deleteditems.

Réinstallation et désinstallation de dreamweaver dans un environnement multi-utilisateurs

Après avoir installé Dreamweaver, si vous souhaitez réinstaller le programme ou le mettre à jour, Dreamweaver sauvegarde automatiquement une copie des fichiers de configuration utilisateur existants. Vos paramètres personnels resteront donc accessibles. Lors de la déinstallation de Dreamweaver dans un environnement multiutilisateur (opération possible uniquement pour les utilisateurs disposant de privilèges administratifs), Dreamweaver peut supprimer tous les dossiers de configuration utilisateur à votre demande.

Utilisation des profils de navigateurs

Les profils de navigateurs sont les fichiers utilisés par Dreamweaver pour vérifier vos documents lorsque vous exécutez la vérification d'un navigateur cible (voir Utilisation de Dreamweaver). Chaque profil contient des informations à propos des balises et attributs HTML pris en charge par un navigateur donné. Un profil de navigateur peut également renfermer des avertissements, des messages d'erreur ainsi que des suggestions de substitution de balises.

Les profils de navigateurs sont stockés dans le dossier Configuration/BrowserProfiles dans le dossier de l'application Dreamweaver. Vous pouvez modifier les profils existants ou en créer de nouveaux à l'aide de Dreamweaver ou d'un éditeur de texte. Il n'est pas nécessaire de quitter Dreamweaver avant de modifier ou de créer des profils de navigateurs.

À propos de la mise en forme des profils de navigateurs

Les profils de navigateur suivent un format spécifique. Afin d'éviter toute erreur d'analyse durant la vérification des navigateurs cibles, observez les instructions suivantes lors de la modification ou de la création de profils :

  • La première ligne est destinée au nom du profil. Elle doit être suivie d'un retour chariot simple. Le nom défini sur cette ligne s'affiche dans la boîte de dialogue Vérification du navigateur cible et dans le rapport de vérification du navigateur cible. Ce nom doit être unique. La seconde ligne est réservée à l'indicateur PROFILE_TYPE=BROWSER_PROFILE. Cette ligne permet à Dreamweaver de déterminer quels documents sont des profils de navigateurs. Cette ligne ne doit pas être modifiée ou déplacée. Si une ligne commence par deux tirets (--), cela indique un commentaire (cette ligne est donc ignorée durant la vérification de la cible). Tout commentaire doit être placé en début de ligne. Il ne faut pas insérer deux tirets en milieu de ligne. Vous devez utiliser une space aux emplacements suivants

Avant le crochet de fermeture >) dans la ligne ! ELEMENT - Àprou la parenthèse d'ouverture dans une liste de valeurs d'un attribut. Avant une parenthèse de fermeture dans une liste de valeurs. Avant et après chaque trait vertical (|) dans une liste de valeurs.

  • Vous devez entrer un point d'exclamation (!) (non précédé d'un espace) avant chacun des mots suivants :

! ELEMENT, ! ATTLIST, ! Error et ! msg.

  • Vous pouvez inclure ! Error, ! Warning et ! Info dans la zone ! ELEMENT ou ! ATTLIST.
  • Les messages ! msg peuvent uniquement contenir du texte simple.
  • Les commentaires HTML (<!-- -->) ne peuvent être repertoriés comme balises dans les profils de navigateurs car ils interfèrent dans l'analyse. Dreamweaver ne consigne aucune erreur à propos des commentaires car ils sont pris en charge par tous les navigateurs.

L'exemple suivant indique la syntaxe d'une entrée de balise :

<! ELEMENT htmlTag NAME="tagsName">

<!ATTLIST htmlTag  
unsupportedAttribute1 !Error !msg="The unsupportedAttribute1 attribute of the htmlTag tag is not supported. Try using supportedAttribute1 for a similar effect."  
supportedAttribute1  
supportedAttribute2 (validValue1 | validValue2 | validValue3)  
unsupportedAttribute2 !Error !msg="Don't ever use the unsupportedAttribute2 attribute of the htmlTag tag!"  
> 

Les éléments utilisés dans cette syntaxe se définissent comme suit :

BaliseHTML est la balise telle qu'elle apparait dans le document HTML. - NomDeBalisé est un nom explicatif de la balise. Par exemple, le nom de la balise HR est "Horizontal Rule" (barre horizontale). L'attribut NAME est facultatif. Si cet élément est défini, NomDeBalisé est utilisé pour les messages d'erreur. Si aucun nom n'est défini, BaliseHTML est utilisé dans les messages d'erreur. AttributNonSupporte est un attribut non pris en charge. Tout attribut ou balise n'étant pas explicitement mentionné comme pris en charge sera considéré comme non pris en charge. Spécifiez les balises ou attributs non pris en charge uniquement lorsque vous souhaitez créer un message d'erreur personnalisé. - AttributeSupporte est un attribut pris en charge par http://Tag. Seules les balises répertoriées sans désignation! Error sont considérées comme prises en charge par le navigateur. ValeurValide indique une valeur prise en charge par l'attribut.

L'exemple suivant indique une entrée de la balise APPLET exacte pour Netscape Navigator 3.0:

<!ELEMENT APPLET Name="Java Applet">  
<!ATTLIST APPLET  
Align (top |middle |bottom |left |right |absmiddle |  
absbottom |baseline |texttop)  
Alt  
Archive  
Class !Warning !msg="This browser ignores the CLASS attribute for the APPLET  
tag."  
Code  
Codebase  
Height  
HSpace  
ID !Warning !msg="This browser ignores the ID attribute for the APPLET tag.  
Use NAME instead."  
Name  
Style !Warning !msg="This browser ignores the STYLE attribute for the APPLET  
tag."  
VSpace 

Création et modification d'un profil de navigateur

Vous pouvez créer un profil de navigateur en modifiant un profil existant. Par exemple, pour créer un profil pour une version future de Microsoft Internet Explorer disposant déjà d'un profil, ajoutez les nouvelles balises ou attributs introduits dans la nouvelle version et enregistrez-le comme profil pour la nouvelle version.

Remarque

Avant de créer un profil de navigateur pour une nouvelle version d'un navigateur, rendez-vous sur le site de Macromedia Exchange pour Dreamweaver à l'adresse suivante: www.macromedia.com/go/dreamweaver_exchange_fr/. Vous pourrez ainsi vérifier si Macromedia a fourni un profil de navigateur à télécharger et à installer à l'aide de Extension Manager.

Pour créer ou modifier un profil de navigateur :

  1. Ouvrez le fichier existant à modifier.

Pour créer un nouveau profil, ouvrez un profil le plus identique possible à celui que vous souhaitez créer, puis enregistrez-le sous un nouveau nom.

  1. Si vous créez un profil, changez le nom qui s'affiche sur la première ligne de texte dans le fichier (deux profils ne peuvent pas porter le même nom).
  2. Ajoutez les nouvelles balises ou attributs pris en charge par le navigateur en utilisant la syntaxe représentée dans A propos de la mise en forme des profils de navigateurs, page 33.

Si vous ne souhaitez pas recevoir de messages d'erreur à propos d'une balise donnée non prise en charge, ajoutez cette dernière à la liste des balises prises en charge. Si vous effectuez cette opération, enregistrez le profil dans un fichier séparé sous un nouveau nom de fichier (par exemple, NomduNavigateur x. x limited). Le fait de donner un nouveau nom à cet autre profil conserve le profil original avec uniquement les balises réellement prises en charge.

  1. Supprimez tous les attributs et balises qui ne sont pas pris en charge par le navigateur.

Cette étape est normalement facultative si vous créez un profil pour une nouvelle version de Netscape Navigator ou de Internet Explorer car les navigateurs n'abandonnent que rarement la prise en charge d'une balise.

  1. Ajoutez des messages d'erreur en respectant la syntaxe générée dans A propos de la mise en forme des profils de navigateurs, page 33.

Les profils fournis avec Dreamweaver répertorient toutes les balises prises en charge pour les navigateurs spécifiques. Pour ajouter un message d'erreur personnalisé à une balise, entrez ! msg = "message" après ! Error. L'exemple suivant présente des informations qui s'affichent dans le profil de Netscape Navigator 3.0 (avec d'autres attributs non générés ici):

<!ELEMENT HR name="Horizontal Rule">
<!ATTLIST HR
COLOR !Error>
Pour ajouter un message d'erreur personnalisé, entrez !msg= suivi de votre message d'erreur entre guillemets ("):
<!ELEMENT HR name="Horizontal Rule">
<!ATTLIST HR
COLOR !Error !msg="Internet Explorer 3.0 supports the COLOR tag in horizontal rules, but Netscape Navigator 3.0 does not."
> 
  1. Vous pouvez utiliser l'objet ! Error pour toutes les situations d'erreur ou l'objet ! Warning ou ! Info pour indiquer qu'une balise sera ignorée sans causer d'erreur.

Modification des mappings FTP

Le fichier FTPExtensionMap.txt (Windows) et le fichier FTPExtensionMapMac.txt (Macintosh) mappent les extensions de nom de fichier en modes de transfert FTP (ASCII ou BINAIRE).

Chaque ligne dans chacun des deux fichiers comprend une extension de nom de fichier (par exemple, GIF) ainsi que le mot ASCII ou le mot BINARY (binaire) pour indiquer quel mode utiliser lors du transfert d'un fichier comportant cette extension. Sur Macintosh, chaque ligne comprend également un code creator (tel que DmWr) et un type de fichier (tel que TEXT). Lorsque vous téléchargez un fichier portant l'extension donnée, Dreamweaver lui assigne alors le creator et le type de fichier désignés.

Si un fichier que vous transférez ne compte pas d'extension de nom de fichier, Dreamweaver utilise le mode de transfert binaire.

Dreamweaver ne peut pas transférer de fichiers en mode Macbinary. Si vous devez transférer des fichiers en mode Macbinary, vous devez utiliser un autre client FTP.

Les exemples suivants illustrent une ligne (du fichier Macintosh) indiquant que les fichiers portant l'extension. html doivent être transférés en mode ASCII :

HTML DmWr TEXT ASCII

Dans le fichier FTPExtensionMap.txt et le fichier FTPExtensionMapMac.txt (Macintosh), tous les éléments placés sur une même ligne sont séparés par des tabulations. L'extension et le mode de transfert sont écrites en majuscules.

Pour modifier un paramètre par défaut, modifier le fichier dans un éditeur de texte.

Pour ajouter des informations relatives à une nouvelle extension de nom de fichier :

  1. Modifiez le fichier extension-map dans un éditeur de texte.
  2. Sur une ligne vierge, entrez l'extension de nom de fichier (en majuscules), puis appuyez sur la touche de tabulation.
  3. Sur Macintosh, ajoutez le code creator, un caractère de tabulation, puis le type de fichier suivi d'un autre caractère de tabulation.
  4. Choisissez entre ASCII et BINARY (binaire) pour spécifier un mode de transfert FTP.
  5. Enregistrez le fichier.

Types de documents extensibles dans dreamweaver

XML est doté d'un système performant pour définir des documents et des structures de données complexes. Dreamweaver organise selon plusieurs schémas XML les informations sur les comportements de serveur, les balises et les boîtes de dialogue de balises, les composants, les types de documents et des références.

Lorsque vous créez et utilisez des extensions dans Dreamweaver, vous pouvez souvent créer ou modifier les fichiers XML existants afin de gérer les données utilisées par ces extensions. Dans la plupart des cas, vous pouvez copier un fichier existant du sous-dossier approprié du dossier Configuration vers le dossier à utiliser comme modèle.

Fichier de définition de type de document

Le concept de type de document s'articule aujourd'hui autour d'un composant central, à savoir le fichier de définition de type de document. Vous pouvez être en présence de plusieurs fichiers de définition; le cas échéant, ils résident tous dans le dossier Configuration/DocumentTypes. Chaque fichier de définition contient des informations concernant au moins un type de document. Des informations essentielles, telles que le modèle de serveur, le style de codage par couleurs, les descriptions, etc., sont décrites pour chacun de ces types de documents.

Remarque

Attention, il ne faut pas confondre fichiers de définition de type de document de Dreamweaver et définition de type de document XML (DTD). Les fichiers de définition de type de document de Dreamweaver contiennent un ensemble d'éléments documenttype, chacun d'entre eux définissant une collection prédéfinie de balises et d'attributs associés à un type de document. Au lancement, Dreamweaver analyse les fichiers de définition de type de document et place en mémoire une base de données d'informations concernant tous les types de documents définis.

Dreamweaver fournit un fichier de définition de type de document initial. Ce fichier, nommé MMDocumentTypes.xml, contient les définitions de type de document fournies par Macromedia :

Type de documentModèle de serveurType interneExtensions de fichierModèle de serveur antérieur
ASP.NET C#ASP.NET-CsharpDynamicaspx, ascx
ASP.NET VBASP.NET-VBDynamicaspx, ascx
ASP JavaScriptASP-JSDynamicasp
ASP VBScriptASP-VBDynamicasp
ColdFusionColdFusionDynamiccfm, cfmlUltraDev 4 ColdFusion
Composant ColdFusionDynamiccfc
JSPJSPDynamicjsp
PHPPHPDynamicphp, php3
Élement de bibliothèqueExtension DWIbi
Modèle ASP.NET C#Modèle DWaxcs.dwt
Modèle ASP.NET VBModèle DWaxvb.dwt
Modèle ASP JavaScriptModèle DWaspjs.dwt
Modèle ASP VBScriptModèle DWaspvb.dwt
Modèle ColdFusionModèle DWcfm.dwt
Modèle HTMModèle DWdwt
Modèle JSPModèle DWjsp.dwt
Modèle PHPModèle DWphp.dwt
HTMLHTMLhtm, html
ActionScriptTextas
CSharpTextcs
CSSTextcss
JavaTextjava
JavaScriptTextjs
VBTextvb
VBScriptTextvbs
TextTexttxt
EDMXMLedml
TLDXMLtld
VTMLXMLvtm, vtml
WMLXMLwml
XMLXMLxml

Si vous avez besoin de créer un nouveau type de document, vous pouvez soit ajouter votre entrée dans le fichier de définition de document fourni par Macromedia (MMDocumentTypes.xml), soit ajouter votre propre fichier de définition dans le dossier Configuration/DocumentTypes.

Le sous-dossier NewDocuments résident dans le dossier Configuration/DocumentTypes contient des pages par défaut (modèles) propres à chaque type de document.

Structure des fichiers de définition de type de document

L'exemple suivant représente un fichier classique de définition de type de document :

<?xml version="1.0" encoding="utf-8"?>
<documenttypes
    xmlns:MMString="http://www.macromedia.com/schemes/data/string/">
    <documenttype
        id="dt-ASP-JS"
        servermodel="ASP-JS"
        internaltype="Dynamic"
        winfileextension="asp,htm, html"
        macfileextension=asp, html"
        previewfile="default_aspjs preview.htm"
        file="default_aspjs.htm"
        priorversionservermodel="UD4-ASP-JS" >
        <title>
            <loadString id="mmdocumenttypes_0title" />
        </title>
        <description>
            <loadString id="mmdocumenttypes_0descr" />
        </description>
        </documenttype>
    ...
</documenttypes> 

Le codage par couleurs des types de documents est défini dans les fichiers XML qui résident dans le dossier Configuration/CodeColoring.

Dans l'exemple précédent, l'élément loadstring identifie les chaînes localisées que Dreamweaver devrait utiliser pour le titre et la description des documents de type ASP-JS. Pour plus d'informations sur les chaînes localisées, voir Chaînes localisées, page 48.

Le tableau ci-dessous recense les balises et les attributs autorisés dans un fichier de définition de type de document.

Type d'élementObligatoireDescription
BaliséAttribut
documenttype(root)OuiNœud parent.
idOuiIdentificateur unique pour tous les fichiers de définition de type de document.
servermodelNonSpécifie le modèle de serveur associé (casse prise en compte). Les valeurs suivantes sont valides par défaut : ASP.NET C# ASP.NET VB ASP VBScript ASP JavaScript ColdFusion JSP PHP MySQL Un appel des fonctions getServerModelDisplayName() renvoie ces noms. Les fichiers d'implémentation des modèles de serveur se trouvent dans le dossier Configuration/ServerModels. Les nouveaux modèles de serveur créé par les développpeurs d'extensions viendront compléter cette liste.
Type d'élementObligatoireDescription
BaliseAttribut
internaltypeOuiClassification générale des modes deTraitement des fichiersdans Dreamweaver. Le type internde déterminé si le mode Création estactivé pour ce document etTraits descas particuliers tels que lesextensions ou lesmodèles Dreamweaver.Les valeurs suivantes sont validés :DynamicDWExtension (zones d'affichagespéciales)DWTemplate (zones d'affichagespeciales)HTMLHTML4Text (mode Code uniquement)XHTML1XML (mode Code uniquement)Tous les types de documents liés auserveur de modèle doivent êtreassociés à la valeur Dynamic. HTML doit être en correspondanceavec HTML. Les fichiers de script,notamment les fichiers .css, .js, .vbet .cs doivent être encorrespondance avec Text.Si internatypecorrectàDWTemplate, il convient également despecifier dynamicid. Si, dans le caspréSENT, vous omettez de specifierdynamicid, le type de document du nouveau modèle vierge créé à partirde la boîte de dialogue Nouveaudocument ne sera pas reconnu parles panneaux Comportements deserveur ou Liaisons. Les instances dece modèle sont des modèles HTML.
Type d'élementObligatoireDescription
BaliséAttribut
dynamicidNonRéférence à l'identificateur unique d'un type de document dynamique. Cet attribut n'est pertinent que lorsque internalstype correspond à DWTemplate. Il vous permet d'associer un module dynamique avec un type de document dynamique.
winfileextensionOuiExtension de fichier associée au type de document sous Windows. Utilisez une liste séparée par des virgules pour spécifique plusieurs extensions. La première extension de cette liste correspond à l'extension utilisée par Dreamweaver lorsque l'utilisateur enregistre un document de type documentation. Lorsque deux types de documents non associés à un modulo de serveur portent la même extension de fichier, Dreamweaver reconnaît le premier comme le type de document associé à l'extension.
macfileextensionOuiExtension de fichier associée au type de document sur Macintosh. Utilisez une liste séparée par des virgules pour spécifique plusieurs extensions. La première extension de cette liste correspond à l'extension utilisée par Dreamweaver lorsque l'utilisateur enregistre un document de type documentation. Lorsque deux types de documents non associés à un modulo de serveur portent la même extension de fichier, Dreamweaver reconnaît le premier comme le type de document associé à l'extension.
previewfileNonFichier rendu dans la zone Aperçu de la boîte de dialogue Nouveau document.
fileOuiLe fichier situé dans le dossier DocumentTypes/NewDocuments contenant le contenu du modele des nouveaux documents de type documenttype.
priorversionservermodelNonS'il existe un équivalent du modele de serveur de ce document dans Dreamweaver UltraDev 4, spécifique le nom de la version antérieure du modele de serveur. UltraDev 4 ColdFusion est un modele de serveur antérieur valide.
title(sous-balise)OuiChaine qui apparaît comme élément de catégorie sous la section Document vierge de la boîte de dialogue Nouveau document. Vous pouvez insérer cette châne directement dans le fichier de définition ou pointer vers elle indirectement pour la localiser. Pour plus d'information sur la localisation de cette châine, voir Chaines localisées, page 48. La mise en forme n'était pas autorisée, il est impossible de spécifier les balises HTML.
description(sous-balise)NonChaine de description du type de document. Vous pouvez insérer cette châne directement dans le fichier de définition ou pointer vers elle indirectement pour la localiser. Pour plus d'information sur la localisation de cette châine, voir Chaines localisées, page 48. La mise en forme étant autorisée, il est possible de spécifier les balises HTML.

Lorsque l'utilisateur enregistre un nouveau document, Dreamweaver examine la liste des extensions de la plate-forme actuelle qui sont associées avec le type de document (winfileextension et macfileextension). Dreamweaver sélectionne la première chaîne de la liste pour l'utiliser comme l'extension de fichier par défaut. Pour changer cette extension de fichier par défaut, les extensions de la liste séparées par des virgules doivent être réorganisées de telle sorte que la nouvelle extension par défaut soit la première entrée de la liste.

Au lancement, Dreamweaver lit tous les fichiers de définition de type de document et crée une liste des types de documents valides. Dreamweaver traite toutes les entrées des fichiers de définition pour lesquelles des modèles de serveur inexistant sont utilisés comme types de documents non serveur de modèle. Dreamweaver ignore les entrées dont le contenu est incorrect ou dont les ID ne sont pas unique.

Si, pendant l'analyse du dossier Configuration/Document Types, Dreamweaver ne detecte chaque fichier de définition de type de document ou si l'un des fichiers de définition semble endommagé, Dreamweaver s'arrête en affichant un message d'erreur.

Modèles dynamiques

Vous soulevez la création de modèles d'après des types de documents dynamiques, appelés des modèles dynamiques. La notion de modèle dynamique repose sur les deux éléments fondamentaux suivants

La valeur de l'attribut internaltype d'un nouveau type de document doit être DWTemplate. L'attribut dynamicid doit être défini et sa valeur doit faire référence à l'identificateur d'un type de document existant.

L'exemple suivant définit un type de document dynamique :

PHP

Vous pouvez désormais définir le modèle dynamique suivant, basé sur ce type de document

PHPMySQL: PHP Template </description>

Lorsqu'un utilisateur de Dreamweaver crée un nouveau modèle vierge de type DWTemplate_PHP, Dreamweaver lui permet de créer des comportements de serveur PHP dans le fichier. En outre, lorsque cet utilisateur crée des instances du nouveau modèle, il peut leur définir aussi des comportements de serveur PHP.

Dans l'exemple précédent, où l'utilisateur enregistre le modèle, Dreamweaver ajoute automatiquement l'extension. php. dwt au fichier. De même, lorsque cet utilisateur enregistre une instance du modèle, le fichier reçoit l'extension. php.

Extensions de documents et types de fichiers

Par défaut, Dreamweaver affiche tous les types de fichiers reconnus dans la boîte de dialogue Fichier > Ouvrir. Une fois le nouveau type de document créé, il incombe aux développeurs d'extensions de prendre à jour le fichier Extensions.txt approprié. Si l'utilisateur travaille sur un système multi-utilisateurs (par exemple, Windows XP, Windows 2000 ou Mac OS X), le dossier Configuration contient un autre fichier Extensions.txt. L'utilisateur doit mettre à jour le fichier Extensions.txt car il s'agit de l'instance recherchée et analysée par Dreamweaver.

L'emplacement du dossier Configuration varie selon la plate-forme utilisée.

Les plate-formes Windows 2000 et Windows XP utilisent l'emplacement suivant :

lecteur:\Documents and Settings\nom Utilisateur\Application

Data\Macromedia\Dreamweaver 8\Configuration

Sous Windows XP, ce dossier peut se cacher dans un dossier masqué.

Les plateformes Mac OS X utilisent l'emplacement suivant :

lecteur: Disqueur/Utilisateurs/nom/utilisateur/Bibliothèque/Macromedia/Dreamweaver 8/Configuration

Si Dreamweaver ne parvient pas à localiser le fichier Extensions.txt dans le dossier Configuration de l'utilisateur, Dreamweaver le recherche dans le dossier Dreamweaver Configuration.

Remarque

Sur les plates-formes multiutilisateurs, toute modification de la copie du fichier Extensions.txt qui resides dans le dossier Dreamweaver Configuration, et non pas celle du dossier Configuration de l'utilisateur, est transparente pour Dreamweaver, lequel analyse la copie du fichier Extensions.txt située dans le dossier Configuration de l'utilisateur, et non pas celle du dossier Dreamweaver Configuration.

Pour cela, vous avez le besoin d'ajouter la nouvelle extension à un type de document existant ou de créer un nouveau type de document.

Pour ajouter une nouvelle extension à un type de document existant :

  1. Modifiez le fichier MMDocumentTypes.xml.
  2. Ajoutez la nouvelle extension aux attributs winfileextension et macfileextension du type de document existant.

Pour ajouter un nouveau type de document :

  1. Créez une copie de sauvegarde du fichier Extensions. txt dans le dossier Configuration.
  2. Ouvrez le fichier Extensions. txt dans Dreamweaver ou un éditeur de texte.
  3. Ajoutez une nouvelle ligne pour chaque nouveau type de fichier. Entrez, en majuscules, les extensions de noms de fichiers compatibles avec le nouveau type de fichier et séparez-les par des virgules. Ajoutez ensuite deux points et une brève description à afficher dans le menu contextuel pour les types de fichiers qui s'affichent dans la boîte de dialogue Fichier > Ouvrir.

Par exemple, pour les fichiers JPEG, entrez. JPG, JPEG, JFIF: Fichiers image JPEG

  1. Enregistrez le fichier Extensions.txt.
  2. Redémarrez Dreamweaver.

Pour observer les modifications, sélectionnez Fichier > Ouvrir et cliquez sur le menu contextuel répertoriant les types de fichiers.

Pour modifier le type de fichier indiqué par défaut dans fichier > ouvrir de dreamweaver :

  1. Créez une copie de sauvegarde du fichier Extensions. txt dans le dossier Configuration.
  2. Ouvrez le fichier Extensions. txt dans Dreamweaver ou un éditeur de texte.
  3. Coupez la ligne correspondant au nouveau type par défaut et collez-la en tête de fichier, sur la première ligne.
  4. Enregistrez le fichier Extensions.txt.
  5. Redémarrez Dreamweaver.

Pour observer les modifications, Sélectionnez Fichier > Ouvrir et cliquez sur le menu contextuel répertoriant les types de fichiers.

Chaînes localisées

Dans un fichier de définition de type de document, les sous-balises

et <description> désignent le titre d'affichage et la description du type de document. Vous pouvez utiliser la directive MMString:loadstring dans les sous-balises comme espace réservé pour les chaînes localisées de ces deux sous-balises. Ce procédé, similaire à la programmation de scripts côté serveur, permet de spécifier l'utilisation d'une chaine particulière dans votre page en utilisant un identificateur de chaine comme espace réservé. Cet espace réservé accepte les balises spéciales ou les attributs de balises dont la valeur est replacée.</p> <h1 id="pour-définir-des-chaînes-localisées-procédez-comme-suit">Pour définir des chaînes localisées, procédez comme suit :</h1> <ol> <li>Placez l'instruction suivante en tete du fichier de definition de type de document :</li> </ol> <?xml version="1.0" encoding="utf-8"?> <ol> <li>Déclarez l'espace de noms MMString dans la balise <documenttypes>:</li> </ol> <p><documenttypes xmlns:MMString="http://www.macromedia.com/schemes/data/string/"</p> <ol> <li>A l'emplacement du fjichier de definition de type de document auquel insérer une chaine localisée, utilisez la directive MMString: loadstring pour définir un espace réservé à cette chaine. Vous pouvez spécifique cet espace réservé en procédant comme suit, au besoin :</li> </ol> <p><description> <loadstring>myJSPDocType/Description</loadstring> </description> ou <description> <loadstring id="myJSPDocType/Description" /> </description></p> <p>Dans ces exemple, myJSPDocType/Description est un identificateur de chaine unique faisant office d'espace réservé à la chaine localisée. La chaine localisée est définie à l' étape suivante.</p> <ol> <li>Dans le dossier Configuration/Strings, créez un fjichier XML (ou modifiez un fjichier existant) définissant la chaine localisée. Par exemple, lorsque le code suivant est inséré dans le fjichier Configuration/Strings/strings.xml, il définit la chaine myJSPDocType/</li> </ol> <p>Description: <br /> <strings> <br /> ... <string id="myJSPDocType/Description" value = "<![CDATA[JavaServer Page with <em>special</em> features]]>" <br /> </strings></p> <h1 id="remarque-9">REMARQUE</h1> <p>Les identificateurs de chaîne, tels que myJSPDocType/Description dans l'exemple précédent, doivent être uniques dans l'application Dreamweaver. Au lancement, Dreamweaver analyse tous les fichiers XML du dossier Configuration/Strings et charge ces chaînes uniques.</p> <h1 id="régles-dutilisation-des-fichiers-de-définition-de-type-de-document">Régles d'utilisation des fichiers de définition de type de document</h1> <p>Dreamweaver autorise les types de documents associés à un modèle de serveur à partager des extensions de fichiers. Exemple : ASP-JS et ASP-VB peuvent adopter l'extension .asp (pour savoir quel modele de serveur prévaut, voir canRecognizeDocument(), page 444).</p> <p>Dreamweaver n'autorise pas les types de documents non associés à un modèle de serveur à partager des extensions de fichiers.</p> <p>Si une extension de filchier est revendiquée par deux types de documents alors qu'un type est associé à un modele de serveur et que l'autre ne l'est pas, ce dernier prévaut. Supposons que vous ayez défini un type de document appelé SAM, non associé à un modele de serveur et portant l'extension de filchier .sam, et que vous ajoutiez cette extension au type de document ASP-JS. Lorsqu'un utilisateur ouvre un filchier portant l'extension .sam dans Dreamweaver, le programme lui affecte le type de document SAM, et non pas le type ASP-JS.</p> <h1 id="ouverture-dun-document-dans-dreamweaver">Ouverture d'un document dans Dreamweaver</h1> <p>Lorsqu'un utilisateur ouvre un document, Dreamweaver identifie en plusieurs étapes le type de document d'après son extension de fichier.</p> <p>Si Dreamweaver détecte un type de document unique, il l'utilise et charge le modele de serveur associé (le cas échéant) pour le document que l'utilisateur ouvre. Si cet utiliser a opté pour l'utilisation des comportements de serveur de Dreamweaver UltraDev 4, Dreamweaver charge le modele de serveur UltraDev 4 correspondant.</p> <p>Si l'extension de fichier est commune à plusieurs types de documents, Dreamweaver effectue les opérations suivantes :</p> <p>Si un type de document statique figure dans la liste des types de documents, il prevaut. <br /> Si tous les types de documents sont dynamiques, Dreamweaver génére une liste alphabetique des modèle de serveur associés à ces types de documents, puis appelle la fonction canRecognizeDocument() pour chaque des modèle de serveur (voir canRecognizeDocument(), page 444). Dreamweaver collecte les valeurs de回头 et identifie le modèle de serveur qui a renvoyé l'entier positif le plus grand. Le type de document dont le modèle de serveur a renvoyé l'entier le plus grand correspond au type de document assigné par Dreamweaver au document en cours d'ouverture. Si, toutefois, plusieurs modèle de serveur revoient le même entier, Dreamweaver passé en revue la liste alphabetique de ces modèle de serveur, choses le premier de la liste, puis l'utilise. Si, par exemple, les types ASP-JS et ASP-VB portent la même extension .asp et que leur fonction canRecognizeDocument() respective renvoie une valeur égale, Dreamweaver affecte au document le type ASP-JS (puisque ASP-JS apparaît en premier dans l'ordre alphabetique).</p> <p>Si Dreamweaver ne peut pas faire correspondre l'extension de fichier à un type de document, Dreamweaver ouvre le document au format texte.</p> <h1 id="personnalisation-des-presenta-tions-de-lespace-de-travail">Personnalisation des presenta-tions de l'espace de travail</h1> <p>Dreamweaver yous permit de personnelier la presentation de l'espace de travail. Vous pouze ainsi spécifier les panneaux inclus dans la presentation indiquee, ainsi que divers autres attributs tels que la position et la taille des panneaux, leur etat (reduit ou devellope), la position et la taille de la fenetre d'application, ainsi que la position et la taille de la fenetre de document.</p> <p>La presentation de l'espace de travail est spécifiée dans les fichiers XML stockés dans le dossier Configuration/Workspace layouts. Les sections suivantes décrivent la syntaxe des balises XML. Les attributs facultatifs sont désignés par des accolades ({)). Tout attribut qui n'est pas entouré d'accalades est donc obligatoire.</p> <h1 id="panelset"><panelset></h1> <h1 id="description-4">Description</h1> <p>Balise d'extrémité, qui signale le début de la description du jeu de panneaux.</p> <h1 id="attributes-4">Attributes</h1> <p>Néant</p> <h1 id="contenu-4">Contenu</h1> <p>Cette balise peut contenir une ou plusieurs balises <application>, <document> ou <panelset>.</p> <h1 id="contenant-4">Contenant</h1> <p>Néant</p> <h1 id="example-4">Example</h1> <pre><code class="language-txt"><panelset> <!-- placez les balises panelset ici --> </panelset> </code></pre> <h1 id="application"><application></h1> <h1 id="description-5">Description</h1> <p>Stipule la position et la taille initiales de la fenetre d'application.</p> <h1 id="attributes-5">Attributes</h1> <p>rect, maximize</p> <p>rect spécifie la position et la taille de la fenêtre d'application. La chaine est exprimée au format « gauche haut droite bas », spécifié sous forme de nombres entiers. <br /> - maximize est une valeur boolée : true si la fenêtre d'application est agrandie au démarriage, false dans le cas contraire. La valeur par défaut est true.</p> <h1 id="contenu-5">Contenu</h1> <p>Néant</p> <h1 id="contenant-5">Contenant</h1> <p>Cette balise doit être imbriquée dans une balise panelset.</p> <h1 id="example-5">Example</h1> <pre><code class="language-xml"><panelset> <application rect="0 0 1000 1200" maximize="false"> </application> </panelset> </code></pre> <h1 id="document"><document></h1> <h1 id="description-6">Description</h1> <p>Stipule la position et la taille initiales de la fenetre de document.</p> <h1 id="attributes-6">Attributes</h1> <p>rect, maximize</p> <p>rect spécifie la position et la taille de la fenêtre de document. La chaine est exprimée au format « gauche haut droite bas », spécifié sous forme de nombres entiers. Si la valeur maximise est réglée sur true, la valeur rect n'est pas prise en compte. <br /> - maximize est une valeur boolée : true si la fenêtre de document est agrandie au démarrage, false dans le cas contraire. La valeur par défaut est true.</p> <h1 id="contenu-6">Contenu</h1> <p>Néant</p> <h1 id="contenant-6">Contenant</h1> <p>Cette balise doit être imbibiquée dans une balise panel set.</p> <h1 id="example-6">Example</h1> <pre><code class="language-xml"><panelset> <document rect="100 257 1043 1200" maximize="false"> </document> </panelset> </code></pre> <h1 id="panelframe"><panelframe></h1> <h1 id="description-7">Description</h1> <p>Décrit un groupe entier de panneaux.</p> <h1 id="attributes-7">Attributes</h1> <p>x,y,{width,height},dock,collapse</p> <ul> <li>x indique la position de gauche du groupe de panneaux. Vous pouvez le régler sur un nombre entier ou sur une valeur relative à l'écran. Si le nombre entier excède les limites de l'écran, le groupe de panneaux s'affiche à l'emplacement le plus proche possible pour être visible à l'écran. Les valeurs relatives gériées sont « left (gauche) » ou « right (droite) » et identifient la cordure du groupe de panneaux alignée sur la cordure de l'écran virtuel.</li> </ul> <p>y indique la position supérieure du groupe de panneaux. Vous pouze le régler sur un nombre entier ou sur une valeur relative à l'écran. Si le nombre entier excède les limites de l'écran, le groupe de panneaux s'affiche à l'emplacement le plus proche possible pour être visible à l'écran. Les valeurs relatives gériées sont « top (haut) » ou « bottom (bas) » et identifient la cordure du groupe de panneaux alignée sur la cordure de l'écran virtuel. <br /> - width indique la largeur du groupe de panneaux, exprimée en pixels. Cet attribut est facultatif. Si vous ne spécifie pas de largeur, la valeur par défaut du groupe de panneaux est utilisé. <br /> - height indique la hauteur du groupe de panneaux, exprimée en pixels. Cet attribut est facultatif. Si vous ne spécifie pas de hauteur, la valeur par défaut du groupe de panneaux est utilisé. <br /> - dock est une chaîne qui identifie la cordure du cadre d'application sur laquelle est ancre le groupe de panneaux. Cet attribut n'est pas pris en compte sur Macintosh, car il est impossible d'ancre les groupes de panneaux. <br /> - collapse est une valeur booléenne: true indique que le groupe de panneaux est réduit, false indique que le groupe de panneaux est développé. Cet attribut n'est pas pris en compte sur Macintosh, car les panneaux flottent.</p> <h1 id="contenu-7">Contenu</h1> <p>Cette balise doit containir une ou plusieurs balises panelcontainer.</p> <h1 id="contenant-7">Contenant</h1> <p>Cette balise doit être imbriquée dans une balise panelset.</p> <h1 id="example-7">Example</h1> <pre><code class="language-txt"><panelset> <panelframe rect="196 453 661 987" visible="true" dock="floating"> <!-- placez les balises panelcontainer ici --> </panelframe> </panelset> </code></pre> <h1 id="panelcontainer"><panelcontainer></h1> <h1 id="description-8">Description</h1> <p>Décrit un groupe entier de panneaux.</p> <h1 id="attributes-8">Attributes</h1> <pre><code class="language-csv">expanded, title,{height,}activepanel,visible,maximize,maxRestorePanel, maxRestoreIndex,maxRect,tabsinheader </code></pre> <ul> <li>expanded est une valeur boolée: true si le panneau est développé, false s'il ne l'est pas. <br /> title est une chaine qui indique le titre du panneau. </li> <li>height est un nombre entier qui indique la hauteur des panneaux, exprimée en pixels. Cet attribut est facultatif. Si vous ne spécifie pas height, la valeur par défaut de chaque panneau est utilisé.</li> </ul> <h1 id="remarque-10">REMARQUE</h1> <p>La largeur est heritiée du parent.</p> <ul> <li>activepanel est une valeur numérique correspondant à l'ID du panneau avant. <br /> visible est une valeur booléenne: true si le panneau est visible, false s'il ne l'est pas. </li> <li>maximize est une valeur booléenne: true si le panneau doit être agrandi au lancement, false dans le cas contraire. </li> <li>maxRestorePanel est une valeur numérique correspondant à l'ID du panneau à afficher suite à une restauration. </li> <li>maxRect est une chaîne qui indique la position et la taille du panneau agrandi. La chaîne est exprimée au format « gauche haut droites bas », spécifique sous forme de nombres entiers. </li> <li>tabsinheader est une valeur booléenne: true indique que les onglets doivent être placés dans le titre只剩 que sous la barre de titre, false stipule l'inverse.</li> </ul> <h1 id="contenu-8">Contenu</h1> <p>Cette balise doit containir une ou plusieurs balises panel.</p> <h1 id="contenant-8">Contenant</h1> <p>Cette balise doit être imbibiquée dans une balise panelframe.</p> <h1 id="example-8">Example</h1> <pre><code class="language-html"><panelset> <panelframe rect="196 453 661 987" visible="true" dock="floating"> <panelcontainer title="Color" height="250" visible="true" expanded="true" activepanel="20"> <!-- placez les balises panel ici --> </panelcontainer> </panelframe> </panelset> </code></pre> <h1 id="panel"><panel></h1> <h1 id="description-9">Description</h1> <p>Sécicfé le panneau qui s'affiche dans le contenant.</p> <h1 id="attributes-9">Attributes</h1> <p>id, visibleTab</p> <ul> <li>id est une valeur numérique correspondant à l'ID du panneau. Le tableau ci-dessous contient une liste de valeurs.</li> </ul> <table><tr><td>Produit</td><td>ID</td><td>Panneau</td></tr><tr><td rowspan="20">Flash</td><td>1</td><td>Propriétés</td></tr><tr><td>2</td><td>Actions</td></tr><tr><td>3</td><td>Aligner</td></tr><tr><td>4</td><td>Comportements</td></tr><tr><td>5</td><td>Composants</td></tr><tr><td>6</td><td>Inspecteur de composants</td></tr><tr><td>7</td><td>Mélangeur</td></tr><tr><td>8</td><td>Nuanciers</td></tr><tr><td>9</td><td>Historique</td></tr><tr><td>10</td><td>Info</td></tr><tr><td>11</td><td>Bibliothèque</td></tr><tr><td>12</td><td>Explorateur d'animations</td></tr><tr><td>13</td><td>Sortie</td></tr><tr><td>14</td><td>Propriétés</td></tr><tr><td>15</td><td>Projet</td></tr><tr><td>16</td><td>Transformer</td></tr><tr><td>17</td><td>Séquence</td></tr><tr><td>18</td><td>Châînes</td></tr><tr><td>19</td><td>Débogueur</td></tr><tr><td>101-110</td><td>Panneaux Bibliothèque</td></tr><tr><td>Dreamweaver</td><td>1</td><td>Propriétés</td></tr><tr><td>Zorn</td><td>1</td><td>Propriétés</td></tr></table> <p>visibleTab est une valeur booléenne : true pour afficher l'onglet et le panneau et false dans le cas contraire.</p> <h1 id="contenu-9">Contenu</h1> <p>Néant</p> <h1 id="contenant-9">Contenant</h1> <p>Cette balise doit être imbibiquée dans une balise panel container.</p> <h1 id="example-9">Example</h1> <pre><code class="language-xml"><panelset> <panelframe rect="196 453 661 987" visible="true" dock="floating"> <panelcontainer title="Color" height="250" visible="true" expanded="true" activepanel="20"> <panel id="20"></panel> </panelcontainer> </panelframe> </panelset> </code></pre> <h1 id="personnalisation-de-la-barre-doutils-mode-code">Personnalisation de la barre d'outils Mode Code</h1> <p>La barre d'outils Mode Code contient initialement 15 boutons. Vous disposez cependant d'autres boutons. Pour personneliser la barre d'outils Mode Code, vous pouvez modifier les boutons intégrés à celle-ci et leur ordre d'affichage. Vous doivent pour ce faire modifier le fjichier Configuration/Toolbars/Toolbars.xml. Vous pouvez également insérer vos propres boutons sur la barre d'outils par le biais d'Extension Manager.</p> <h1 id="pour-modifier-lordre-des-boutons">Pour modifier l'ordre des boutons :</h1> <ol> <li>Ouvrez le fichier Configuration/Toolbars/toolbars.xml. </li> <li>Localisez la section Code view toolbar en recherchant le commentaire suivant : <!-- Code view toolbar --> </li> <li>Copiez et collez les balises associées aux boutons pour que ces derniers s'affichent dans l'ordre requis dans la barre d'outils. </li> <li>Enregistrez le fichier.</li> </ol> <h1 id="pour-supprimer-un-bouton">Pour supprimer un bouton :</h1> <ol> <li>Ouvrez le fichier Configuration/Toolbars/toolbars.xml. </li> <li>Localisez la section Code view toolbar en recherchant le commentaire suivant : <!-- Code view toolbar --> </li> <li>Entourez le bouton à supprimer d'un commentaire.</li> </ol> <p>L'exemple suivant illustré un bouton entoure de commentaires.</p> <pre><code class="language-html"><! -- supprimer le bouton de la barre d'outils Mode Code <button id="DW_ExpandAll" image="Toolbars/images/MM/T_ExpandAll_Sm_N.png" disabledImage="Toolbars/images/MM/T_ExpandAll_Sm_D.png" toolTip="Expand All" domRequired="false" enabled="dw.getFocus(true) == 'TextView' || dw.getFocus(true) == ¬ 'html'" command="if (dw.getFocus(true) == 'TextView' || dw.getFocus(true) == 'html') dw.getDocumentDOM().source expandAllCodeFragments();" update="onViewChange" /> </code></pre> <h1 id="4-enregistrez-le-fichier">4. Enregistrez le fichier.</h1> <p>Pour afficher un bouton qui n'apparait pas sur la barre d'outils, il suffit de supprimer le commentaire qui entoure le bouton dans le fjichier XML.</p> <h1 id="personnalisation-du-mode-code">Personnalisation du mode Code</h1> <p>2</p> <p>En mode Code, Macromedia Dreamweaver 8 permet de rédigier rapidement un code lisible et sans erreur grâce aux deux outils que sont les indicateurs de code et la coloration du code. De plus, Dreamweaver effectue un contrôle de validité du code saisi par rapport aux navigateurs cibles spécifique et permet de modifier le formatage HTML par défaut.</p> <p>Vous pouvez personnaliser les outils d'indication et de coloration du code en modifier leurs fischiers d'implementation au format XML. Vous pouvez ajouter des éléments aux menus Indicateurs de code en ajoutant des entrées au fischier CodeHints.xml. Vous pouvez modifier les modèles de couleur par l'intémédiaire du fischier de style de coloration du code,</p> <p>Colors.xml, ou encore modifier les modèles de coloration du code ou en ajouter de nouveaux par l'intermédiaire des fichiers de syntaxe de coloration du code (par exemple,</p> <p>CodeColoring.xml). Vous pouvez également modifier le filchier de profil CSS (feuille de style en cascade) de votre navigateur cible de manière à influer sur le système de validation des valeurs et des propriétés CSS dans Dreamweaver. Vous pouvez enfin modifier le formatage HTML par défaut de Dreamweaver par l'intermédiaire de la boîte de dialogue Préférences.</p> <p>Les sections suivantes décrivent les procédures de personnelisation de ces différentes fonctions.</p> <h1 id="indicateurs-de-code">Indicateurs de code</h1> <p>Les indicateurs de code sont des menus contextuels qui s'affichent dans Dreamweaver lorsque vous tapez certains caractères en mode Code. Ils vous évient de saisir tout le texte en proposant une liste de chaînes susceptibles de compléter la chaine que vous tapez. Si la chaine que vous tapez apparait dans le menu, Sélectionnez-la et appuyez sur Entrée ou Retour pour compléter votre saisie. Si vous tapez <, par exemple, un menu contextual affiche une liste des noms de balises. Plutôt que de taper le reste du nom de la balise, vous pouvez la sélectionner dans le menu pour l'inclure à votre texte.</p> <p>Dreamweaver charge les menus Indicateurs de code à partir du fjichier CodeHints.xml enregistré dans le dossier Configuration/CodeHints. Vous pouvez ajouter des menus Indicateurs de code dans Dreamweaver en les définissant dans le fjichier CodeHints.xml. Une fois le contenu du fjichier CodeHints.xml charge, vous pouvez également ajouter dynamiquement de nouveaux menus Indicateurs de code via JavaScript. Par exemple, le code JavaScript ajoute des données à la liste des variables de session dans le panneau Liaisons. Vous pouvez utiliser le même code pour ajouter un menu Indicateurs de code. Dans ce cas, lorsqu'un utilisateur tape « Session. » en mode Code, un menu de variables de session s'affiche dans Dreamweaver. Pour obtenir des informations sur l'ajout ou la modification d'un menu Indicateurs de code avec JavaScript, voir Fonctions de code dans le Guide des API de Dreamweaver.</p> <p>Certain types de menus Indicateurs de code ne s'expressi pas dans le fisier XML ou l'API JavaScript de Dreamweaver. Le fisier CodeHints.xml et l'API JavaScript contiennent un sous-ensemble utile du moteur Indicateurs de code, mais certaines fonctionnalités Dreamweaver ne sont pas accessibles. Par exemple, comme il n'este pas d'accroche JavaScript pouvant afficher un selecteur de couleur, Dreamweaver ne peut pas exprimer le menu Valeurs des attributs à l'aide de JavaScript. Vous pouvez uniquement afficher un menu d' éléments de texte permettant d'insérer du texte.</p> <p>Lorsque vous insérez du texte, le pointeur d'insertion se place après la chaine insérée.</p> <h1 id="fichier-codehintsxml">Fichier CodeHints.xml</h1> <p>Le fichier CodeHints.xml contient les entités suivantes :</p> <p>Une listede tous les groupes de menus</p> <p>Lorsque vous sélectionnez la catégorie Indicateurs de code dans la boîte de dialogue Préférences, la liste des groupes de menus s'affiche dans Dreamweaver. Pour ouvrir la boîte de dialogue Préférences, sélectionnez Edition > Préférences. Dreamweaver MX propose les groupes ou types de menus Indicateurs de code suivants : Noms des balises, Noms des attributs, Valeurs des attributs, Arguments des fonctions, Méthodes quant aux objets et variables et Entités HTML.</p> <p>La description de chaque groupe de menus</p> <p>Cette description relative à la catégorie Indicateurs de code apparait dans la boîte de dialogue Préférences lorsque vous sélectionnez le groupe de menus dans la liste. La description de l'entrée sélectionnée apparaît au-dessous de la liste de groupes de menus.</p> <p>Des menus Indicateurs de code</p> <p>Un menu se compose d'un modele qui déclenché le menu Indicateurs de code et d'une liste d' éléments de menu. Par exemple, le modele "&" peut déclencher un menu "& ", ">,"<".</p> <p>Le format du fjichier CodeHints.xml est illustré dans l'exemple suivant :</p> <p><codeHints> <br /> <menugroup name = "HTML Entities" enabled = "true" id = "CodeHints.HTML_Entities"> <br /> <description> </p> <![CDATA[ When you type a "&', a drop-down menu shows a list of HTML entities. The list of HTML entities is stored in Configuration/CodeHints.xml.]>> </description> <menu pattern "&"> <menuitem value "&amp;" texticon "&"/> <menuitem value "&l;," icon "lessThan.gif"/> </menu> </menugroup> <menugroup name "Tag Names" enabled "true" id "CodeHintsTAG_Names"> <description> <![CDATA[ When you type ", a drop-down menu shows all possible tag names. You can edit the list of tag names using the <a href "javascript:dw].[popuTagLibraryEditor()] > Tag Library Editor </a>] </description> </menugroup> <menugroup name "Function Arguments" enabled "true" id = "CodeHints_Function_Arguments"> <description> ... </description> <function pattern "ArraySort(array, sort_type, sort_order)" dootypes "CFML"/> <function pattern "Response.addCookie(Cookie cookie)" dootypes "JSP"/> </menugroup> <codeHints> <h1 id="balises-des-indicateurs-de-code">Balises des indicateurs de code</h1> Le fjichier CodeHints.xml contient les balises suivantes qui définissant les menus Indicateurs de code. Vous pouvez utiliser ces balises pour définir les menus Indicateurs de code. <h1 id="codehints"><codehints></h1> <h1 id="description-10">Description</h1> La balise codeHints est la racine du fichier CodeHints.xml. <h1 id="attributes-10">Attributes</h1> Néant <h1 id="contenu-10">Contenu</h1> Une ou plusieurs balises menugroup. <h1 id="contenant-10">Contenant</h1> Néant <h1 id="example-10">Example</h1> <codehints> <h1 id="menugroup"><menugroup></h1> <h1 id="description-11">Description</h1> Chaque balise menugroup correspond à un type de menu. Vous pouvez afficher les types de menu définis dans Dreamweaver enCHOIsissant la categorie Indicateurs de code dans la boite de dialogue Prefrences. Pour afficher la boite de dialogue Prefrences, choisissez Prefrences dans le menu Edition. Vous peuventisser un groupe de menus ou ajouter des menus à un groupe existant. Les groupes de menus sont des collections logiques de menus que l'utilisateur peut activer ou désactiver dans la boîte de dialogue Préférences. <h1 id="attributes-11">Attributes</h1> name, enabled, id L'attribut name est le nom localisé qui apparaît dans la liste des groupes de menu de la catégorie Indicateurs de code de la boîte de dialogue Préférences. L'attribut enblcd indique si le groupe de menus est actuellment coche ou activé. Une coche apparait en regard d'un groupe de menus s'il est activé dans la categorie Indicateurs de code de la boite de dialogue Preferences. Pour activer un groupe de menus, assignez-lui la valeur true ; pour le désactiver, assignez-lui la valeur false. L'attribut id est un identificateur non localisé qui se rapporte au groupe de menus. <h1 id="contenu-11">Contenu</h1> Balises description, menu et function. <h1 id="contenant-11">Contenant</h1> Balise codehints. <h1 id="example-11">Example</h1> <menugroup name="Session Variables" enabled="true" id="Session_Code_Hints"> <h1 id="description-12"><description></h1> <h1 id="description-13">Description</h1> La balise description contient du texte affché par Dreamweaver lorsque vous scélectionnez le groupe de menus dans la boîte de dialogue Préférences. La description apparait au-dessous de la liste de groupes de menus. Elle peut containir une balise à dans laquelle l'attribut href doit être une URL JavaScript executée par Dreamweaver si l'utilisateur clique sur le lien. Utilisez la structure XML CDATA pour inclure des caractères spéciaux ou illégaux dans la chaine afin qu'ils soient considérés comme du texte par Dreamweaver. <h1 id="attributes-12">Attributes</h1> Néant <h1 id="contenu-12">Contenu</h1> Texte de la description. <h1 id="contenant-12">Contenant</h1> Balise menugroup. <h1 id="example-12">Example</h1> <pre><code class="language-txt"><description> <![CDATA[ To add or remove tags and attributes, use the <a href="javascript:dw.tagLibrary.showTagLibraryEditor()">Tag Library Editor</a>. ]]> </description> </code></pre> <h1 id="menu"><menu></h1> <h1 id="description-14">Description</h1> Cette balise décrit un menu contextuel. Dreamweaver affiche le menu lorsqu'el'utilisateur tape le dernier caractère de la chaine dans l'attribut pattern. Par exemple, le menu qui affiche le contenu d'une variable de session peut avoir un attribut pattern égal à « Session. » <h1 id="attributes-13">Attributes</h1> pattern, doctypes, casesensitive L'attribut pattern spécifique le modele des caractères tapes entrainant l'affichage du menu Indicateurs de code dans Dreamweaver. Si le premier caractère est une lecture, un chiffre ou un trait de soulignement, Dreamweaver affiche le menu uniquement si le caractère qui précède le modele dans le document n'est pas une lecture, un chiffre ou un trait de soulignement. Par exemple, si le modele est « Session», Dreamweaver n'affiche pas le menu lorsque l'utilisateur tape « ma_Session » L'attribut doctypes indique que le menu est actif uniquement pour les types de documents spécifiés. Cet attribut permet de spécifique différentes listes de noms de fonctions pour ASP-JavaScript (ASP-JS), Java Server Pages (JSP), Macromedia ColdFusion, etc. Vous pouvez spécifique l'attribut doctypes en tant que liste d'ID de types de documents séparés par des virgules. Reportez-vous au fichier MMDocumentTypes.xml dans le dossier Configuration/Documenttypes de Dreamweaver pour consulter la liste des types de documents Dreamweaver. L'attribut casesensitive indique si le modele fait la distinction entre les majuscules et les minuscules. Les valeurs possibles pour l'attribut casesensitive sont true, false ou un sous-ensemble de la liste séparée par des virgules spécifiée pour l'attribut doctypes. La liste des types de documents vous permet de spécifier si le modele fait la distinction entre majuscules et minuscules pour certains types de documents只想 que d'autres. Par défaut, la valeur est false si vous omettez cet attribut. Si vous définissez la valeur de l'attribut casesensitive sur true, le menu Indicateurs de code s'affiche uniquement si le texte tape par l'utilisateur correspond exactement au modele spécifique par l'attribut pattern. Si vous définissez la valeur de l'attribut casesensitive sur false, le menu s'affiche même si le modele est en minuscules et le texte en majuscules. <h1 id="contenu-13">Contenu</h1> Balise menuitem. <h1 id="contenant-13">Contenant</h1> Balise menugroup. <h1 id="example-13">Example</h1> <menu pattern="CGI." doypes="ColdFusion"> <h1 id="menuitem"><menuitem></h1> <h1 id="description-15">Description</h1> Cette balise indique le texte d'un élément dans un menu contextuel Indicateurs de code. La balise menuitem indique également la valeur à insérer dans le texte lorsque vous sélectionnez l'élément. <h1 id="attributes-14">Attributes</h1> label, value {icon}, {texticon} L'attribut label correspond à la chaîne affichée dans le menu contextual de Dreamweaver. L'attribut value correspond à la chaîne insérée par Dreamweaver dans le document lorsque vous Sélectionnez l'élement du menu. Lorsque l'utilisateur Sélectionne l'élement du menu et appuie sur Entrée ou Retour, Dreamweaver remplace tout le texte tape depuis l'affichage du menu. L'utilisateur a tape les caractères correspondant au modele avant l'affichage du menu, si bien que Dreamweaver ne les insère pas une seconde fois. Par exemple, si vous souhaitez insérer & l'entité HTML de l'esperluette (&), vous pouvez définir les balises menu et menuitem suivantes : <menu pattern="&"> <menuitem label="amp;amp;" value="amp;" texticon="_amp;"/> L'attribut de valeur n'inclut pas l'esperluette (&), car l'utilisateur l'a tapée avant que le menu ne s'affiche. L'attribut icon (facultatif) spécifie le chemin d'accès à un fichier image affché par Dreamweaver sous la forme d'une icône située à gauche du texte du menu. L'emplacement de ce fichier est définir par une URL (dossier Configuration). L'attribut texticon (facultatif) affiche une chaîne de texte dans la zone d'icone (et non un fichier image). Cet attribut est utilisé pour le menu Entités HTML. <h1 id="contenu-14">Contenu</h1> Néant <h1 id="contenant-14">Contenant</h1> Balise menu. <h1 id="example-14">Example</h1> <menuitem label="CONTENT_TYPE" value=""CONTENT_TYPE")" icon="shared/mm/images/hintMisc.gif"/> <h1 id="function"><function></h1> <h1 id="description-16">Description</h1> Cette balise remplace la balise menu pour la spécification des arguments de fonction et des méthodes d'objet d'un menu contextuel Indicateurs de code. Lorsque vous tapez un nom de fonction ou de méthode en mode Code, Dreamweaver affiche un menu de prototypes de fonction, indiquant l'argument actuel en caractère gras. Chaque fois que vous tapez une virgule, Dreamweaver met à jour le menu de manière à afficher l'argument suivant en gras. Par exemple, si vous avez tape le nom de fonction ArrayAppend dans un document ColdFusion, le menu Indicateurs de code affiche ArrayAppend(array, value). Une fois la virgule suivant array saisie, le menu se met à jour et affiche ArrayAppend(array, value). Dans le cas des méthodes d'objet, Dreamweaver affiche un menu regroupant les méthodes définies pour l'objet dont vous tapez le nom. L'ensemble de fonctions reconnues est enregistré dans le fjichier CodeHints.xml qui se trouve dans le dossier Configuration de Dreamweaver. <h1 id="attributes-15">Attributes</h1> pattern, doctypes, casesensitive L'attribut pattern spécifique le nom de la fonction et sa liste d'arguments. S'il est utilisé avec des méthodes, l'attribut pattern déscrit le nom de l'objet et de la méthode, ainsi que les arguments de cette dernière. Avec un nom de fonction, le menu Indicateurs de code s'affiche lorsque l'utilisateur tape fonctionname(). Le menu affiche la liste des arguments relatifs à la fonction. S'il est utilisé avec une méthode d'objet, le menu Indicateurs de code s'affiche lorsque l'utilisateur tape objectname. (point final compris). Ce menu indique les méthodes qui ont été spécifiées pour l'objet. Ensuite, le menu Indicateurs de code affiche une liste des arguments de la méthode, comme il le fait avec une fonction. L'attribut doctypes indique que le menu est actif uniquement pour les types de documents spécifiés. Cet attribut permet de spécifique différentes listes de noms de fonctions pour ASP-JavaScript (ASP-JS), Java Server Pages (JSP), Macromedia ColdFusion, etc. Vous pouvez spécifique l'attribut doctypes en tant que liste d'ID de types de documents séparés par des virgules. Pour obtenir une liste des types de documents Dreamweaver, voir le fjichier Dreamweaver Configuration/Documenttypes/ MMDocumentTypes.xml. L'attribut casesensitive indique si le modele fait la distinction entre les majuscules et les minuscules. Les valeurs possibles pour l'attribut casesensitive sont true, false ou un sous-ensemble de la liste séparée par des virgules spécifiée pour l'attribut doctypes. La liste des types de documents vous permet de spécifique si le modele fait la distinction entre majuscules et minuscules pour certains types de documents plusôt que d'autres. Par défaut, la valeur est false si vous omettez cet attribut. Si vous définissez la valeur de l'attribut casesensitive sur true, le menu Indicateurs de code s'affiche uniquement si le texte tape par l'utilisateur correspond exactement au modele spécifique par l'attribut du modele. Si vous définissez la valeur de l'attribut casesensitive sur false, le menu s'affiche même si le modele est en minuscules et le texte en majuscules. <h1 id="contenu-15">Contenu</h1> Néant <h1 id="contenant-15">Contenant</h1> Balise menugroup. <h1 id="example-15">Example</h1> // exmple de fonction <function pattern = "CreateDate(year, month, day)" DOCTYPES = "ColdFusion" /> // exmple de methode d'objet <function pattern = "application.getAttribute(String name)" DOCTYPES = "JSP"/> <h1 id="coloration-du-code">Coloration du code</h1> Dreamweaver permit de personnelier ou d'endetre les modèle de coloration affichés en mode Code de manière à ajouter de nouveaux mots-clés à un modele ou à ajouter des modèle de coloration du code correspondant à de nouveaux types de documents. Par exemple, si vous développpez des fonctions JavaScript dans le script côté client, vous pouze ajouter le nom de ces fonctions à la section des mots-clés de manière à les afficher dans la couleur indiquée dans les préférences. De même, si vous développpez un nouveau langage de programmation pour un serveur d'application et que vous souhaitez distribuer un nouveau type de document dans le but d'aider les utilisateurs de Dreamweaver à l'inclure dans le processus de création de pages, vous pouze ajouter un modele de coloration du code correspondant à ce type de document. Dreamweaver contient la fonction JavaScript dreamweaver拯救 codecoloring() permettant de recharger les fischiers XML de coloration du code susceptibles d'avoir eté modifiés manuellement. Pour plus d'informations sur cette fonction, voir le Guide des API de Dreamweaver. Pourmettreà jourunmodèlede colorationducodeouajouterun nouveau modèle,vous nevez modifierlesfichiersdefinitionedcolorationdu code. <h1 id="fichiers-de-coloration-du-code">Fichiers de coloration du code</h1> Dreamweaver définit les styles et les modèles de coloration du code dans des fischiers XML se trouvant dans le dossier Configuration/CodeColoring. Un fischier de style de coloration du code définit le style des champs indiqués dans les définitions de syntaxe. Le nœud racine est <codeColors>. Un fischier de modèle de coloration du code définit la syntaxe de coloration du code ; le nœud racine est <codeColoring>. Le fischier de style de coloration du code de Dreamweaver est Colors.xml. Les fischiers de syntaxe de coloration du code de Dreamweaver sont CodeColoring.xml, ASP JavaScript.xml, ASP VBScript.xml, ASP.NET CSharp.xml et ASP.NET VB.xml. La coloration du code illustrée dans les exemples ci-dessous apparait uniquement sur les impressions en couleur. Pour voir la coloration du code illustrée dans ces exemples, voir l'aide de Dreamweaver > Extensions > Extension de Dreamweaver ou consultez le fichier PDF Extension de Dreamweaver dans le dossier Documentation du CD d'installation. L'extrait du fichier Colors.xml ci-dessous illustré la hierarchie de balises dans un fichier de style de coloration du code : <pre><code class="language-xml"><codeColors> <colorGroup> <syntaxColor id="CodeColor_hTMLEntity" bold="true" italic="true" /> <syntaxColor id="CodeColor_JavascriptNative" text="#009999" /> <syntaxColor id="CodeColor_JavascriptNumber" text="#FF0000" /> ... <tagColor id="CodeColor_hTMLStyle" text="#990099" /> <tagColor id="CodeColor_hTMLTable" text="#009999" /> <syntaxColor id="CodeColor_hTMLComment" text="#999999" italic="true" /> ... </colorGroup> </codeColors> </code></pre> Les couleurs sont indiquées sous la forme de valeurs hexadécimales rouge-vert-bleu (RVB). Par exemple, l'instruction text="009999" figurant dans le code XML ci-dessus assigne une couleur bleu-vert (sarcelle) à l'ID "CodeColor_JavascriptNative". L'extrait du fichier codeColoring.xml ci-dessous illustre la hierarchie de balises dans un fichier de modulo de coloration du code ainsi que la relation entre le fichier de styles et le fichier de modulo : <pre><code class="language-xml"><codeColoring> <scheme name="Text" id="Text" dootypes="Text" priority="1"> <ignoreTags>Yes</ignoreTags> <defaultText name="Text" id="CodeColor_Text" /> <sampleText dotypes="Text"> <!--CDATA[Default file syntax highlighting. The quick brown fox jumped over the lazy dog. ] ] </sampleText> </scheme> <scheme name="HTML" id="HTML" dotypes="ASP.NET_VB, ASP.NET_CSharp, ASP-JS, ASP-VB, ColdFusion, CFC, HTML, JSP, EDML, PHPMySQL, DWTemplate, LibraryItem, WML" priority="50"> <ignoreCase>Yes</ignoreCase> <ignoreTags>No</ignoreTags> <defaultText name="Text" id="CodeColor_Text" /> <defaultTag name="Other Tags" id="CodeColor_Text" /> <defaultAttribute /> <commentStart name="Comment" id="CodeColor_TextComment"><![CDATA [<!--]></commentStart> ... <tagGroup name="HTML Anchor Tags" id="CodeColor_TextAnchor" taglibrary="DWTagLibrary_html" tags="a"/> <tagGroup name="HTML Form Tags" id="CodeColor{textForm}" taglibrary="DWTagLibrary_html" tags="select, form, input, option, textarea"> ... </codeColoring> </codeColoring> </code></pre> Notez que les balises syntaxColor et tagColor du fichier Colors.xml assignent des valeurs de couleur et de style à une valeur de chaine id. La valeur id permet alors d'assigner un style à une balise scheme dans le fichier codeColoring.xml. Par exemple, l'id de la balise defaultTag figurant dans l'extrait codeColoring.xml est "CodeColorHTMLComment". Dans le fichier Colors.xml, la valeur text= attribuée à la valeur id de "CodeColorHTMLComment" est "#999999", c'est-à-dire gris. Dreamweaver contient les modèle de coloration du code suivants: Par défaut, HTML, JavaScript, ASP_Python, ASP_VBScript, JSP et ColdFusion. La valeur id du modèle par défaut est égale à "Text". Ce modele est utilisé pour les types de documents dont le modele de coloration du code n'est pas définir. Un fichier de coloration du code contient les balises suivantes. <h1 id="scheme"><scheme></h1> <h1 id="description-17">Description</h1> La balise scheme indique la coloration du code assignee à un bloc de texte de code. Un fichier peut contenir plusieurs modèles spécifique différentes colorations pour différents langages de script ou de balise. Chaque modèle possède une priorité vous permettant d'imbriquer un bloc de texte correspondant à un modele dans un bloc de texte correspondant à un autre modele. <h1 id="attributes-16">Attributes</h1> name, id, priority, dotypes name="nom_modèle" Chaine attribuant un nom au modele. Le nom du modele s'affiche dans la boîte de dialogue Modifier le modele de coloration de Dreamweaver. Dreamweaver affiche une combinaison de nom de modele et de champ, par exemple HTML Comment. Si vous n'attribuuez pas de nom, les champs du modele n'apparaissent pas dans la boite de dialogue Modifier le modele de coloration. Pour plus d'informations sur la boite de dialogue Modifier le modele de coloration, voir Modification des modeles, page 93. - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe. ■ priority="chaine" Valeurs comprises entre "1" et "99". La priorité la plus haute est "1". Indique la priorité d'un modele. Les blocs se trouvant au sein de blocs dont la priorité est supérieure sont ignorés; les blocs se trouvant au sein de blocs dont la priorité est inférieure ou égale sont prioritaires. Si vous n'indiquez pas de priorité, la valeur par défaut est "50". - doypes="liste_doc" Facultatif. Indique une liste des types de documents, séparés par des virgules, auxquels s'applique le modele de coloration du code. Cette valeur est indispensable pour la résolution des conflits impliquant différents blocs de début et de fin dont les extensions sont identiques. <h1 id="contenu-16">Contenu</h1> blockEnd, blockStart, brackets, charStart, charEnd, charEsc, commentStart, commentEnd, cssProperty, cssSelector, cssValue, defaultAttribute, defaultText, endOfLineComment, entity, functionKeyword, idChar1, idCharrest, ignoreCase, ignoreMMTParam, ignoreTags, keywords, numbers, operators, regexp, sampletext, searchPattern, stringStart, stringEnd, stringEsc, urlProtocol, urlProtocols <h1 id="contenant-16">Contenant</h1> Balise codeColoring. <h1 id="example-16">Example</h1> <scheme name="Text" id="Text" doctypes="Text" priority="1"> <h1 id="blockend"><blockEnd></h1> <h1 id="description-18">Description</h1> Facultatif. Texte délimitant la fin du bloc de texte de ce modele. Les balises blockEnd et blockStart doivent être équilibrées et leur combinaison doit être unique. La casing des valeurs indiquées n'est pas prise en compte. La valeur de la balise blockEnd peut être composée d'un seul caractère. Vous pouvezisser plusieurs instances de cette balise. Pour plus d'informations sur les chaînes blockEnd, voir Caracteres génériques, page 89. <h1 id="attributes-17">Attributes</h1> Néant <h1 id="example-17">Example</h1> <blockEnd><![CDATA[---->]]> <p></blockEnd></p> <h1 id="blockstart"><blockStart></h1> <h1 id="description-19">Description</h1> <p>Facultatif. Spécifiée uniquement si le modele de coloration peut être imbrique dans un autre modele de coloration. Les balises blockEnd et blockStart doivent être équilibrées et leur combinaison doit être unique. La casse des valeurs indiquées n'est pas prise en compte. La valeur de la balise blockStart doit composer au minimum deux caractères. Vous pouvezcrier plusieurs instances de cette balise. Pour plus d'informations sur les chaînes blockStart,voir Caracteres génériques, page 89. Pour plus d'informations sur l'attribut blockStartscheme, voir Coloration des délimiteurs de bloc de modele, page 85.</p> <h1 id="attributes-18">Attributes</h1> <p>canNest, dotypes, id, name, scheme</p> <p>canNest Indique si le modele peut s'imbriquer. Les valeurs sont "Yes" ou "No". La valeur par défaut est "No". <br /> - doypes="type_doc1, type_doc2,..." Obligatoire. Indique une liste des types de documents, séparés par des virgules, dans lesquels vous pouvez imbriquer ce modèle de coloration du code. Les types de documents sont définis dans le fichier Configuration/ Document Types/MMDocumentTypes.xml de Dreamweaver. <br /> - id="chaine_id" Obligatoire lorsquescheme = "customText".Chaine d'identificateur permettant de mapper la couleur et le style a cet element de syntaxe.</p> <p>name="nom_affché" Chaine apparaissant dans la boite de dialogue Modifier le modele de coloration lorsqu escheme="customText". <br /> ■ scheme Obligatoire. Définit la coloration des chaînes blockStart et blockEnd. Pour plus d'informations sur les valeurs d'attribut scheme possibles, voir Coloration des délimiteurs de bloc de modele, page 85.</p> <h1 id="example-18">Example</h1> <pre><code class="language-txt"><blockStart doctypes="ColdFusion,CFC" scheme="innerText" canNest="Yes"><![CDATA [<!--->]></blockStart> </code></pre> <h1 id="brackets"><brackets></h1> <h1 id="description-20">Description</h1> <p>Listedescaracteresrepresentantdescrochets.</p> <h1 id="attributes-19">Attributes</h1> <p>name, id</p> <p>name="nom_crochet" Chaigne assignant un nom à la liste des crochets. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-19">Example</h1> <pre><code class="language-xml"><brackets name="Bracket" id="CodeColor_JavaBracket"></brackets> </code></pre> <h1 id="charstart"><charStart></h1> <h1 id="description-21">Description</h1> <p>Contient une chaine de texte représentant le délimueur du début d'un caractère. Les balises charStart et charEnd doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises charStart ... charEnd.</p> <h1 id="attributes-20">Attributes</h1> <p>Néant</p> <h1 id="example-20">Example</h1> <pre><code class="language-xml"><charStart><![CDATA[']]></charStart> </code></pre> <h1 id="charend"><charEnd></h1> <h1 id="description-22">Description</h1> <p>Contient une chaîne de texte représentant le délimueur de fin d'un caractère. Les balises charStart et charEnd doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises charStart ... charEnd.</p> <h1 id="attributes-21">Attributes</h1> <p>Néant</p> <h1 id="example-21">Example</h1> <p><charEnd><![CDATA[']]></charEnd></p> <h1 id="charesc"><charEsc></h1> <h1 id="description-23">Description</h1> <p>Contient une chaine de texte représentant un caractère d'échévement. Vous pouvez insérer plusieurs balises charEsc.</p> <h1 id="attributes-22">Attributes</h1> <p>Néant</p> <h1 id="example-22">Example</h1> <p><charEsc><![CDATA[]></charEsc></p> <h1 id="commentstart"><commentStart></h1> <h1 id="description-24">Description</h1> <p>Chaîne de texte délimitant le début d'un bloc de commentaire. Les balises commentStart et commentEnd doivent être équilibrées. Vous pouze indiquer plusieurs paires de balises commentStart.../commentEnd.</p> <h1 id="attributes-23">Attributes</h1> <p>Néant</p> <h1 id="example-23">Example</h1> <p><commentStart><![CDATA[%--]]></commentStart></p> <h1 id="commentend"><commentEnd></h1> <h1 id="description-25">Description</h1> <p>Chaine de texte délimitant la fin d'un bloc de commentaire. Les balises commentStart et commentEnd doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises commentStart.../commentEnd.</p> <h1 id="attributes-24">Attributes</h1> <p>Néant</p> <h1 id="example-24">Example</h1> <p><commentEnd><![CDATA[-%]></commentEnd></p> <h1 id="cssimport"><cssimport/></h1> <h1 id="description-26">Description</h1> <p>Balise vide indiquant la règle de coloration du code de la fonction @import de l'objet style dans une CSS.</p> <h1 id="attributes-25">Attributes</h1> <p>name,id</p> <p>name="nom_cssImport" Chaigne assignant un nom à la fonction @import CSS.</p> <p>id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-25">Example</h1> <p><cssImport name="import" id="CodeColor_CSSImport" /></p> <h1 id="cssmedia"><cssMedia/></h1> <h1 id="description-27">Description</h1> <p>Balise vide indiquant la règle de coloration du code de la fonction @media de l'objet style dans une CSS.</p> <h1 id="attributes-26">Attributes</h1> <p>name,id</p> <p>name="nom_cssMedia" Chaine assignant un nom à la fonction @media CSS. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-26">Example</h1> <p><cssMedia name "@media" id = "CodeColorCSSMedia"/></p> <h1 id="cssproperty"><cssProperty/></h1> <h1 id="description-28">Description</h1> <p>Balise vide indiquant les règes CSS et regroupant des attributs de coloration du code.</p> <h1 id="attributes-27">Attributes</h1> <p>name, id</p> <p>name="nom_cssProperty" Chaine assignant un nom à la propriété CSS. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="preférence-de-couleur-de-code">Preférence de couleur de code</h1> <p>Propriété CSS</p> <h1 id="example-27">Example</h1> <p><cssProperty name="Property" id="CodeColorCSSProperty" /></p> <h1 id="cssselector"><cssSelector/></h1> <h1 id="description-29">Description</h1> <p>Balise vide indiquant les règes CSS et regroupant des attributs de coloration du code.</p> <h1 id="attributes-28">Attributes</h1> <p>name, id</p> <p>name="nom_cssSelector" Chaine assignant un nom au sélecteur CSS. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-28">Example</h1> <p><cssSelector name="Selector" id="CodeColor_CSSSelector" /></p> <h1 id="cssvalue"><cssValue/></h1> <h1 id="description-30">Description</h1> <p>Balise vide indiquant les règes CSS et regroupant des attributs de coloration du code.</p> <h1 id="attributes-29">Attributes</h1> <p>name, id</p> <p>name="nom_cssValue" Chaine assignant un nom à la valeur CSS. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-29">Example</h1> <pre><code class="language-xml"><cssValue name="Value" id="CodeColorCSSValue"/> </code></pre> <h1 id="defaultattribute"><defaultAttribute></h1> <h1 id="description-31">Description</h1> <p>Facultatif. Cette balise s'applique uniquement à la syntaxe de balise (c'est-à-dire une syntaxe pour laquelle ignoreTags="No"). Si cette balise figure dans le code, tous les attributs de balise sont colorés suivant le style qui lui est assigné. Si ce n'est pas le cas, la couleur des attributs est identique à celle de la balise correspondante.</p> <h1 id="attributes-30">Attributes</h1> <p>name</p> <ul> <li>Chaine assignant un nom à l'attribut par défaut.</li> </ul> <h1 id="example-30">Example</h1> <pre><code class="language-xml"><defaultAttribute name="Attribute"/> </code></pre> <h1 id="defaulttag"><defaultTag></h1> <h1 id="description-32">Description</h1> <p>Cette balise permet de spécifier la couleur et le style par défaut des balises d'un modele.</p> <h1 id="attributes-31">Attributes</h1> <p>name, id</p> <p>name="nom_affché" Chaine affichee par Dreamweaver dans l'éditeur de coloration du code. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-31">Example</h1> <pre><code class="language-xml"><defaultTag name="Other Tags" id="CodeColorHTMLTag"/> </code></pre> <h1 id="defaulttext"><defaultText/></h1> <h1 id="description-33">Description</h1> <p>Facultatif. Si cette balise figure dans le code, les chaînes de texte définies par toute autre balise sont colorées suivant le style assigné à cette balise. Si ce n'est pas le cas, le texte est de valeur noire.</p> <h1 id="attributes-32">Attributes</h1> <p>name, id</p> <p>name="nom_cssSelector" Chaigne assignant un nom au sélecteur CSS. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-32">Example</h1> <p><defaultText name="Text" id="CodeColor_TextText" /></p> <h1 id="endoflinecomment"><endOfLineComment></h1> <h1 id="description-34">Description</h1> <p>Chaine de texte délimitant le début d'un commentaire allant jusqu'à la fin de la ligne actuelle.</p> <p>Vou pouve insérer plusieurs balises endOfLineComment.../endOfLineComment.</p> <h1 id="attributes-33">Attributes</h1> <p>Néant</p> <h1 id="example-33">Example</h1> <p><endOfLineComment><![CDATA[/]]></endOfLineComment></p> <h1 id="entity"><entity/></h1> <h1 id="description-35">Description</h1> <p>Balise vide indiquant que les caractères spéciaux HTML doivent être reconnus etContainir des attributs de coloration.</p> <h1 id="attributes-34">Attributes</h1> <p>name, id</p> <p>name="nom_entié" Chaigne assignant un nom à l'entité. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-34">Example</h1> <p><entity name="Special Characters" id="CodeColor_HTMLEntry"/></p> <h1 id="functionkeyword"><functionKeyword></h1> <h1 id="description-36">Description</h1> <p>Identifie les mots-clés définissant une fonction. Ces mots-clés permettent à Dreamweaver de naviguer dans le code. Vous pouvez insérer plusieurs balises functionKeyword.</p> <h1 id="attributes-35">Attributes</h1> <p>name, id</p> <p>name="nom_functionKeyword" Chaine assignant un nom au bloc fonctionKeyword. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-35">Example</h1> <p><functionKeyword name="Function Keyword" id="CodeColor_JavascriptFunction">function</functionKeyword></p> <h1 id="idchar1"><idChar1></h1> <h1 id="description-37">Description</h1> <p>Liste de chacun des caractères identifiables par Dreamweaver comme premier caractère d'un identifient.</p> <h1 id="attributes-36">Attributes</h1> <p>name, id</p> <p>name="nom_idChar1" Chaine assignant un nom à la liste des caractères d'identifiant. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-36">Example</h1> <p><idChar1>$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</idChar1></p> <h1 id="idcharrest"><idCharRest></h1> <h1 id="description-38">Description</h1> <p>Liste de caractères devant être identifiés comme les autres caractères de l'identificateur. Si la balise idChar1 n'est pas spécifique, tous les caractères de l'identifient sont validés en fonction de cette liste.</p> <h1 id="attributes-37">Attributes</h1> <p>name, id</p> <p>name="nom_idCharRest" Chaine assignant un nom au bloc stringStart. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <h1 id="example-37">Example</h1> <pre><code class="language-xml"><idCharRest name="Identifier" id="CodeColor_JavascriptIdentifier"—\(abcdefghijklmnpqrstuvwxyzABCDEFGH IJKLMNOPQRSTUVWXYZ0123456789</idCharRest> </code></pre> <h1 id="ignorecase"><ignoreCase></h1> <h1 id="description-39">Description</h1> <p>Indique si la casse des caractères doit être ignorée lors de la comparaison des expressions et des mots-clés. Les valeurs sont Yes ou No. La valeur par défaut est Yes.</p> <h1 id="attributes-38">Attributes</h1> <p>Néant</p> <h1 id="example-38">Example</h1> <pre><code class="language-txt"><ignoreCase>Yes</ignoreCase> </code></pre> <h1 id="ignoremmtparams"><ignoreMMTParams></h1> <h1 id="description-40">Description</h1> <p>Indique si une couleur particulière doit être attribuée aux balises MMTInstance:Param, <!-- InstanceParam ou <!-- #InstanceParam. Les valeurs sont Yes et No ; la valeur par défaut est Yes. Cette balise assure la coloration appropriée des pages utilisant des modèles.</p> <p><h1 id="attributes-39">Attributes</h1></p> <p>Néant</p> <p><h1 id="example-39">Example</h1></p> <pre><code class="language-xml"><ignoreMMTParams>No</ignoreMMTParams> </code></pre> <p><h1 id="ignoretags"><ignoreTags></h1></p> <p><h1 id="description-41">Description</h1></p> <p>Indique si les balises doivent être ignoreses. Les valeurs sont Yes et No ; la valeur par défaut est Yes. Réglez la valeur sur No si la syntaxe correspond à un langage de balise délimité par < et > . Réglez la valeur sur Yes si la syntaxe correspond à un langage de programmation.</p> <p><h1 id="attributes-40">Attributes</h1></p> <p>Néant</p> <p><h1 id="example-40">Example</h1></p> <p><ignoreTags>No</ignoreTags></p> <p><h1 id="islocked"><isLocked></h1></p> <p><h1 id="description-42">Description</h1></p> <p>Indique si le texte correspondant au modele est autorisé à être modifié en mode Code. Les valeurs sont Yes et No. La valeur par défaut est No.</p> <p><h1 id="attributes-41">Attributes</h1></p> <p>Néant</p> <p><h1 id="example-41">Example</h1></p> <p><isLocked>Yes</isLocked></p> <p><h1 id="keyword"><keyword></h1></p> <p><h1 id="description-43">Description</h1></p> <p>Chaine de texte définitissant un mot-clé. Vous pouvez insérer plusieurs balises keyword. Il n'este aucune restriction liée au premier caractère d'un mot-clé ; en revanche, les caractères suivants doivent être a-z, A-Z, 0-9, _, $ ou @.</p> <p>La couleur du code est spécifiée par les balises contenant keyword.</p> <p><h1 id="attributes-42">Attributes</h1></p> <p>Néant</p> <p><h1 id="example-42">Example</h1></p> <p><keyword>.<keyword></p> <p><h1 id="keywords"><keywords></h1></p> <p><h1 id="description-44">Description</h1></p> <p>Liste des mots-clés correspondant au type spécifique dans l'attribut category. Vous pouvez insérer plusieurs balises keywords.</p> <p><h1 id="attributes-43">Attributes</h1></p> <p>name, id</p> <p>name="nom_mots_clés" Chaigne assignant un nom à la liste des mots-clés. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <p><h1 id="contenu-17">Contenu</h1></p> <p><keyword> </keyword></p> <p><h1 id="example-43">Example</h1></p> <pre><code class="language-xml"><keywords name="Reserved Keywords" id="CodeColor_JavascriptReserved"> <keyword>break</keyword> <keyword>case</keyword> </keywords> </code></pre> <p><h1 id="numbers"><numbers/></h1></p> <p><h1 id="description-45">Description</h1></p> <p>Balise vide spécifique les chiffres devant être reconnus et contenant des attributs de couleur.</p> <p><h1 id="attributes-44">Attributes</h1></p> <p>name, id</p> <p>name="nom_chiffre" Chaine assignant un nom à la balise numbers. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <p><h1 id="example-44">Example</h1></p> <p><numbers name="Number" id="CodeColor_CFScriptNumber"/></p> <p><h1 id="operators"><operators></h1></p> <p><h1 id="description-46">Description</h1></p> <p>Liste des caractères devant être reconnus comme opérateurs.</p> <p><h1 id="attributes-45">Attributes</h1></p> <p>name, id</p> <p>name="nom_opérateur" Chaigne assignant un nom à la liste des caractères opérateurs. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe.</p> <p><h1 id="example-45">Example</h1></p> <pre><code class="language-xml"><operators name="Operator" id="CodeColor_JavaOperator"><![CDATA[+-*/%<>!?:==&|^~]]></operators> </code></pre> <p><h1 id="regexp"><regexp></h1></p> <p><h1 id="description-47">Description</h1></p> <p>Spécífie une liste de balises searchPattern.</p> <p><h1 id="attributes-46">Attributes</h1></p> <p>name, id, delimiter, escape</p> <p>name="nom_stringStart" Chaine assignant un nom à la liste deschains de modele de recherche. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe. <br /> delimiter Caractère ou chaîne situé au début et à la fin d'une expression régulière. <br /> escape Caractère ou chaine signalant le traitement de caractères spéciaux, également appelé caractère ou chaine « d'échévement ».</p> <p><h1 id="contenu-18">Contenu</h1></p> <pre><code class="language-twig"><searchPattern></searchPattern> </code></pre> <p><h1 id="example-46">Example</h1></p> <p><regexp name "RegExp" id "CodeColor_JavascriptRegexp" delimiter "/" escape "\\"> <searchPattern > < ! [CDATA[(\s*/e*/]></searchPattern> <searchPattern > < ! [CDATA[ \s*/e*/]></searchPattern> </regexp></p> <p><h1 id="sampletext"><sampleText></h1></p> <p><h1 id="description-48">Description</h1></p> <p>Texte servant à la représentation dans la fenêtre Aperçu de la boîte de dialogue Modifier le modèle de coloration. Pour plus d'informations sur la boîte de dialogue Modifier le modèle de coloration, voir Modification des modèles, page 93.</p> <p><h1 id="attributes-47">Attributes</h1></p> <p>doctypes</p> <ul> <li>doypes="doc_type1, doc_type2,..." Types de documents pour lesquels cet échantillon apparait.</li> </ul> <p><h1 id="example-47">Example</h1></p> <p><sampleText doctypes="JavaScript"><![CDATA[/* JavaScript */ function displayWords(arrayWords) { for (i = 0 ; i < arrayWords.length(); i + + ) { //commentaire en ligne alert("Word " ^+ i ^+ " is " ^+ arrayWords[i]); } <br /> } <br /> var tokens = new Array("Bonjour","Monde"); displayWords(tokens); <br /> ]></sampleText></p> <p><h1 id="searchpattern"><searchPattern></h1></p> <p><h1 id="description-49">Description</h1></p> <p>Chaîne de caractères définissant un modele de recherche régulier à l'aide des caractères génériques pris en charge. Vous pouvez insérer plusieurs balises searchPattern.</p> <p><h1 id="attributes-48">Attributes</h1></p> <p>Néant</p> <p><h1 id="contenant-17">Contenant</h1></p> <p>Balise regexp.</p> <p><h1 id="example-48">Example</h1></p> <p><searchPattern > < ! [CDATA[(\s*/\e\.\/] ]]></searchPattern></p> <p><h1 id="stringstart"><stringStart></h1></p> <p><h1 id="description-50">Description</h1></p> <p>Ces balises contiennent une chaine de texte représentant le délimueur du début d'une chaine. Les balises stringStart et stringEnd doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises stringStart ... stringEnd.</p> <p><h1 id="attributes-49">Attributes</h1></p> <p>name, id, wrap</p> <p>name="nom_stringStart" Chaine assignant un nom au bloc stringStart. <br /> - id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe. <br /> - wrap="true" ou "false". Définit la reconnaissance ou non des chaînes de texte placées sur la ligne suivante. La valeur par défaut est "true".</p> <p><h1 id="example-49">Example</h1></p> <p><stringStart name="Attribute Value" id="CodeColor_htmlString"><![CDATA["]]></stringStart></p> <p><h1 id="stringend"><stringEnd></h1></p> <p><h1 id="description-51">Description</h1></p> <p>Contient une chaîne de texte représentant le délimueur de fin d'une chaîne de code. Les balises stringStart et stringEnd doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises stringStart ... stringEnd.</p> <p><h1 id="attributes-50">Attributes</h1></p> <p>Néant</p> <p><h1 id="example-50">Example</h1></p> <p><stringEnd > < ! [CDATA["]]></stringEnd></p> <p><h1 id="stringesc"><stringEsc></h1></p> <p><h1 id="description-52">Description</h1></p> <p>Contient une chaine de texte représentant le délimueur du caractère d'échévement d'une chaine. Vous pouvez insérer plusieurs balises stringEsc.</p> <p><h1 id="attributes-51">Attributes</h1></p> <p>Néant</p> <p><h1 id="example-51">Example</h1></p> <p><stringEsc></![CDATA[]]></stringEsc></p> <p><h1 id="taggroup"><tagGroup></h1></p> <p><h1 id="description-53">Description</h1></p> <p>Cette balise regroupe une ou plusieurs balises auxquelles vous pouvez assigner une couleur et un style uniques.</p> <p><h1 id="attributes-52">Attributes</h1></p> <p>id, name, taglibrary, tags</p> <ul> <li>id="chaine_id" Obligatoire. Chaine d'identificateur permettant de mapper la couleur et le style à cet élément de syntaxe. <br /> name="nom_affiche" Chaine affichée par Dreamweaver dans l'éditeur de coloration du code. </li> <li>taglibraryer="id_bibliothèque_balises" Identifié de la bibliothèque de balises à laquelle le groupe appartient. </li> <li>tags="liste_balise" Balise ou liste de balises séparées par des virgules compensant le groupe de balises.</li> </ul> <p><h1 id="example-52">Example</h1></p> <p><tagGroup name="HTML Table Tags" id="CodeColorHTMLTable" taglibrary="DWTagLibrary_html" tags="table, tbody, td, tfoot, th, thead, tr, vspec, colw, hspec" /></p> <p><h1 id="coloration-des-délimiteurs-de-bloc-de-modèle">Coloration des délimiteurs de bloc de modèle</h1></p> <p>L'attribut de modulo blockStart déterminé la coloration des chaînes de début et de fin de bloc ou des délimiteurs de bloc. Les valeurs valides pour l'attribut blockStart sont répertoriées ci-après.</p> <p>Ne pas confondre l'attribut blockStartscheme et la balise scheme.</p> <p><h1 id="innertext">innerText</h1></p> <p>Cette valeur indique à Dreamweaver que les délimiteurs de bloc doivent avoir la même couleur que le texte par défaut du modele qu'ils renferment.</p> <p>Le modele Modèle illustrer l'effect de ce modele. Le modele Modèle correspond à des blocs de code en lecture seule. La couleur grise indique qu'il est impossible de les modifier. Les délimiteurs de bloc, à savoir les chaînes < ! - - #EndEditable et < ! - - #BeginEditable"...", sont aussi de couleur grise car il est égardless impossible de les modifier.</p> <p><h1 id="exemple-de-code">Exemple de code</h1></p> <pre><code class="language-html"><!-- #EndEditable --> <p><b><font size="+2">header</font></b></p> <!-- #BeginEditable "test" --> <p>Ce texte-ci estmodifiable </p> <p>&nbsp;<p> <!-- #EndEditable --> </code></pre> <p><h1 id="example-53">Example</h1></p> <pre><code class="language-txt"><blockStart dootypes="ASP-JS, ASP-VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion,CFC, HTML, JSP,LibraryItem,PHPMySQL" scheme="innerText"><![CDATA [<!--\s\#BeginTemplate]]></blockStart> </code></pre> <p><h1 id="customtext">customText</h1></p> <p>Cette valeur indique à Dreamweaver qu'une couleur personnalisée doit être appliquée aux délimiteurs.</p> <p><h1 id="exemple-de-code-2">Exemple de code</h1></p> <p>Les délimiteurs de bloc de script PHP, qui apparaissent en rouge, illustrent l'effect de la valeur customText :</p> <pre><code class="language-php"><?php if ($loginMsg <> "") echo $loginMsg; ?> </code></pre> <p><h1 id="example-54">Example</h1></p> <pre><code class="language-xml"><blockStart name="Block Delimiter" id="CodeColor_JavaBlock" doctypes="JSP" scheme="customText"><![CDATA[%]]></blockStart> </code></pre> <p><h1 id="outertag">outerTag</h1></p> <p>La valeur outerTag indique que les balises blockStart et blockEnd sont des balises à partir entière et que Dreamweaver doit les colorer comme des balises du modele qui les entoure.</p> <p>Le module JavaScript, dans lequel les chaînes <script> et </script> correspondent aux balises blockStart et blockEnd, illustrée cette valeur. Ce module correspond aux blocs de code JavaScript, dans lequel les balises ne sont pas reconnues ; les délimiteurs doivent donc prendre la coloration du module qui les entoure.</p> <p><h1 id="exemple-de-code-3">Exemple de code</h1></p> <p><script language = "JavaScript"> //commentaire if(true) windowalert("Bonjour,Monde"); </script></p> <p><h1 id="example-55">Example</h1></p> <pre><code class="language-twig"><blockStart dotypes="PHPMySQL" scheme="outerTag"><![CDATA [<script\s+language="php">]]></blockStart> </code></pre> <p><h1 id="innertag">innerTag</h1></p> <p>Cette valeur est similaire à la valeur outerTag ; la seule différence est que la coloration provient du mode de se trouvant à l'intérieur des délimiteurs. Elle est généralement utilisée pour la balise html.</p> <p><h1 id="nametag">nameTag</h1></p> <p>Cette valeur indique que la chaine blockStart correspond au début d'une balise, que la chaine blockEnd correspond à la fin d'une balise et que ces délimiteurs doivent être colorés suivant les paramètres de balise du modele.</p> <p>Ce type de modele affiche les balises pouvant etre imbriquees dans d'autres balises (par exemple, la balise cfoutput).</p> <p><h1 id="exemple-de-code-4">Exemple de code</h1></p> <pre><code class="language-html"><input type="text" name="zip" <cfif newRecord IS "no"> <cfoutput query="employee"> Value="/#zip#" </cfoutput> </cfif> </code></pre> <p><h1 id="example-56">Example</h1></p> <pre><code class="language-txt"><blockStart dootypes="ColdFusion,CFC" scheme="nameTag"><![CDATA [<cfoutput\n]]></blockStart> </code></pre> <p><h1 id="nametagscript">nameTagScript</h1></p> <p>Cette valeur est identique au nombre nameTag ; cependant, son contenu se compose de script, par exemple, des instructions ou des expressions d'assignation, par opposition aux paires d'attributs name=value.</p> <p>Ce type de modele affiche uniquement les balises contenant du script (par exemple, les balises ColdFusion cfset, cfi et cifelse) et pouvant etre imbriquées au sein d'autres balises.</p> <p><h1 id="exemple-de-code-5">Exemple de code</h1></p> <p>Voir l'exemple illustrant nameTag.</p> <p><h1 id="example-57">Example</h1></p> <pre><code class="language-twig"><blockStart doctypes="ColdFusion,CFC" scheme="nameTagScript"><![CDATA [<cfset\n]]></blockStart> </code></pre> <p><h1 id="traitement-des-modèles">Traitement des modèles</h1></p> <p>Dreamweaver regroupe trois modes de base de coloration du code : le mode CSS, le mode Script et le mode Balises.</p> <p>Dans chaque mode, Dreamweaver applique uniquement la coloration du code à certains champs. Le tableau ci-dessous répertorie les champs auxquels s'applique la coloration du code pour chaque mode.</p> <p><table><tr><td>Champ</td><td>CSS</td><td>Balises</td><td>Script</td></tr><tr><td>defaultText</td><td></td><td>X</td><td>X</td></tr><tr><td>defaultTag</td><td></td><td>X</td><td></td></tr><tr><td>defaultAttribute</td><td></td><td>X</td><td></td></tr><tr><td>comment</td><td>X</td><td>X</td><td>X</td></tr><tr><td>string</td><td>X</td><td>X</td><td>X</td></tr><tr><td>cssProperty</td><td>X</td><td></td><td></td></tr><tr><td>cssSelector</td><td>X</td><td></td><td></td></tr><tr><td>cssValue</td><td>X</td><td></td><td></td></tr><tr><td>character</td><td></td><td>X</td><td>X</td></tr><tr><td>function keyword</td><td></td><td></td><td>X</td></tr><tr><td>identifier</td><td></td><td></td><td>X</td></tr><tr><td>number</td><td></td><td>X</td><td>X</td></tr><tr><td>operator</td><td></td><td></td><td>X</td></tr><tr><td>brackets</td><td></td><td>X</td><td>X</td></tr><tr><td>keywords</td><td></td><td>X</td><td>X</td></tr></table></p> <p>Afin de faciliter le processus de définition de modèles, Dreamweaver permet de spécifique des caractères génériques et des caractères d'échévement.</p> <p><h1 id="caracteres-génériques">Caracteres génériques</h1></p> <p>La liste ci-dessous répertorie les caractères génériques pris en charge dans Dreamweaver, leschains nécessiterant de les spécifique et une description de leur utilisation.</p> <p><table><tr><td>Caractère générique</td><td>Chaine d'éché pement</td><td>Description</td></tr><tr><td>Caractère générique *</td><td></td><td>Ignore tous les caractères de la règle jusqu'à la détction du caractère suivant le caractère générique. Par exemple, <MMTInstance:Editable name="*"> permet de détector toutes les balises de ce type pour lesquelles l'attribut name est spécifique.</td></tr><tr><td>Caractère générique \e<em>x avec caractère d'échévement</td><td></td><td>x correspond au caractère d'échévement. Mèmeuse utilisation que le caractère générique, avec possibilité de spécifique un caractère d'échévement. Le caractère suivant le caractère d'espacement est ignoré. Le caractère suivant le caractère générique peut ainsi apparaître dans une chaine sans correspondre au critère spécifique pour l'arrêt dutraitement du caractère générique. Par exemple, /\e</em>\/permiet de reconnaître une expression JavaScript régulière commençant et terminant par une barre oblique (/) et pouvant contenir des barres obliques précédées d'une barre oblique inversée (/). La barre oblique inversée correspond au caractère d'échéancement de coloration du code ; lors, vous nevez la précéder d'une barre oblique inversée lorsque vous la spécifiez dans du code XML coloré.</td></tr><tr><td>Caractère générique</td><td>Chaine d'échap pement</td><td>Description</td></tr><tr><td>Espace blanc facultatif</td><td>\s*</td><td>Permet de reconnaître les espaces vides (meme inexistants) ou les caractères de nouvelle ligne. Par exemple, <!--\s#\include permutation de reconnaître des directives d'inclusion ASP, que l'expression #include soit précédée ou non d'espace blanc, car les deux cas sont valides. Les caractères génériques espace blanc correspondant à toutes les combinaisons d'espace blanc et de caractères de nouvelle ligne.</td></tr><tr><td>Espace blanc obligatoire</td><td>\s+</td><td>Permet de reconnaître un ou plusieurs espaces vides ou les caractères de nouvelle ligne. Par exemple, <!--#include\s+virtual permutation de reconnaître des directives d'inclusion ASP contenant toutes les combinaisons d'espace blanc entre les expressions #include et virtual. Un espace blanc doit obligatoirement séparer ces deux expressions, mais il peut correspondre à toutes les combinaisons de caractères d'espace blanc valides. Les caractères génériques espace blanc correspondent à toutes les combinaisons d'espace blanc et de caractères de nouvelle ligne.</td></tr></table></p> <p><h1 id="caractères-déchéppement">Caractères d'échéppement</h1></p> <p>La liste ci-dessous répertorie les caractères d'échévement pris en charge dans Dreamweaver, les chaînes permettant de les specifier et une description de leur utilisation.</p> <p><table><tr><td>Caractère d'échéppement</td><td>Chaine d'écha ppeme nt</td><td>Description</td></tr><tr><td>Barre oblique inversée</td><td>\ \</td><td>La barre oblique inversée (\/) correspond au caractère d'échéppement de coloration du code ; elle doit donc être ignorée pour être spécifiée dans une rècle de coloration du code.</td></tr><tr><td>Espace blanc</td><td>\s</td><td>Ce caractère d'échéppement correspond à tous les caractères non visibles, à l'exception de ceux correspondant au caractère de nouvelle ligne, comme les espaces et les tabulations.L'espace blanc facultatif et l'espace blanc obligatoire correspondant à la fois aux espaces blancs et aux caractères de nouvelle ligne.</td></tr><tr><td>Nouvelle ligne</td><td>\n</td><td>Ce caractère d'échéppement correspond aux caractères de nouvelle ligne (également appelés sauts de ligne) et aux retours chariot.</td></tr></table></p> <p><h1 id="longueur-maximale-de-chaîne">Longueur maximale de chaîne</h1></p> <p>La longueur maximale autorisé pour les chaines de données est de 100 caractères. Par exemple, la balise blockEnd suivante contient un caractère générique.</p> <pre><code class="language-txt"><blockEnd><![CDATA[<!--\s#BeginEditable\s"\*"\s--->]></blockEnd> </code></pre> <p>En partant du principe que les chaînes de caractère générique espace blanc facultatif ( s^<em> ) correspondant à un seul espace, général automatiquement par Dreamweaver, la chaîne de données comprend 26 caractères, plus une chaîne de caractère générique ( ^</em> ) correspondant au nom.</p> <pre><code class="language-txt"><!-- #BeginEditable "\*" ---> </code></pre> <p>Le nom de région modifiable peut donc composer jusqu'à 74 caractères, c'est-à-dire 100 caractères (longueur maximale) moins 26.</p> <p><h1 id="priorité-de-modèle">Priorité de modèle</h1></p> <p>Dreamweaver applique la coloration de la syntaxe de texte en mode Code en utilisant l'algorithmme suivant :</p> <ol> <li>Dreamweaver déterminé le modèle de syntaxe initial en fonction du type de document du fichier actuel. Le type de document du fichier est déterminé en fonction de l'attribut scheme.documentType. Si aucun type n'est détecté, le modele pour lequel scheme.documentType = "Text" est utilisé. </li> <li>Les modèles peuvent être imbriqués s'ils comportent des paires blockStart...blockEnd. Tous les modèles pouvant être imbriqués et pour lesquels l'extension du fichier actuel est répertoriée dans l'un des attributs blockStart.doypes sont activités pour le fichier actuel ; les autres modèles sont désactivés.</li> </ol> <p>Toutes les combinaisons blockStart/blockEnd doivent'être uniquees.</p> <p>Les modèles peuvent s'imbriquer au sein d'un autre modèle à condition que schemepriority soit supérieure ou égale au modèle extérieur. Si la priorité est la même, le modèle s'imbrique uniquement au niveau du corps du modèle extérieur. Par exemple, le bloc <script>...</script> peut uniquement s'imbriquer dans le bloc <html>....</html> contenant des balises légales ; il ne peut donc pas s'imbriquer au sein d'une balise, d'un attribut, d'une chaine, d'un commentaire, etc.</p> <p>Les modèles dont la priorité est supérieure au modele extérieur peuvent s'imbriquer à quasiment tous les niveaux du modele extérieur. Par exemple, le bloc <% %> peut non seulement s'imbriquer au niveau du corps du bloc <html> </html> , mais également au sein d'une balise, d'un attribut, d'une chaine, d'un commentaire, etc.</p> <p>Le niveau d'imbrication maximum est de 4.</p> <ol> <li>Lorsqu'il recherche des chaînes blockStart, Dreamweaver utilise toujours la correspondance la plus longue. </li> <li>Une fois la chaine blockEnd atteinte pour le modele actuel, la coloration de syntaxe revient au niveau ou la chaine blockStart est detectee. Par exemple, si un bloc <% > est detecté au sein d'une chaine HTML, la coloration reprend avec la couleur de la chaine HTML.</li> </ol> <p><h1 id="modification-des-modèles">Modification des modèles</h1></p> <p>Vouss pouvez modifier les styles d'un modele de coloration du code soit en modifiant le fichier de coloration du code ou en selectionnant la catégorie Coloration du code dans la boite de dialogue Preférences de Dreamweaver (voir illustration ci-dessous):</p> <p><img alt="" src="images/176a3090c0c9f47c4ab33b18def95b938cba92b5f755ccd538cbbcfe8d777d82.jpg" /></p> <p>Les paramètres de couleur et de style des champs susceptibles d'apparaitre plusieurs fois (par exemple, stringStart) doivent être indiqués uniquement pour la première balise. Si vous répartissez les paramètres de couleur et de style sur plusieurs balises et que vous les modifie ultérieurement dans la boîte de dialogue Preférences, vous perdrez vos données.</p> <p>Macromedia recommende de creer des copies de sauevegarde de tous les fichiers XML avant d'apporter vos modifications. Vérifiez toutes les modifications apportées manuelles avant de modifier les paramètres de style et de couleur dans la boite de dialogue Preférences. Si vous modifie un fichier XML non valide dans la boite de dialogue Preférences, vous perdrez vos données.</p> <p>Pour modifier les styles d'un modele dans la catégorie Coloration du code de la boite de dialogue Preférences, double-cliquez sur un type de document ou cliquez sur le bouton Modifier le modele de coloration ; la boite de dialogue Modifier le modele de coloration s'affiche.</p> <p><img alt="" src="images/43e35ed06c747c2b137eea8adc825d36796c3fbea763c2fb7bfc29f6c58a3fc7.jpg" /></p> <p>Pour modifier le style d'un élément en particulier, Sélectionnez-le dans la liste Styles pour. Le volet Styles pour répertorie les champs du modèle modifié ainsi que les modèles susceptibles d'apparaitre sous forme de bloc au sein de ce modele. Par exemple, si vous modifiez le modèle HTML, les champs des blocs CSS et JavaScript apparaissent également.</p> <p>Les champes de modèle répertoriés correspondant aux champes définis dans le fjichier XML. La valeur de l'attribut scheme. name précède chacun des champes répertoriés dans le volet Styles pour. Les champes sans nom ne sont pas répertoriés.</p> <p>Outre la coloration du code, le style d'un élément désigne la mise en caractère gras, la mise en italique, le soullignement et la couleur d'arrière-plan. Une fois l'élement seLECTIONné dans le volet Styles pour, vous pouvez modifier toutes ces caractéristiques de style.</p> <p>La zone Aperçu affiche un échantillon de texte auquel s'appliquent les paramètres indiqués. L'échantillon est définis dans le paramètre sampleText du modele.</p> <p>Selectionnez un élément dans la zone Aperçu pour modifier la sélection de la liste Style pour. Si vous modifiez les paramètres d'un élément d'un modèle, Dreamweaver consigne la valeur dans le fjichier de coloration et remplace le paramètre d'origine. Lorsque vous cliquez sur OK, Dreamweaver actualise automatiquement toutes les modifications de coloration du code.</p> <p><h1 id="examples-de-coloration-du-code">Examples de coloration du code</h1></p> <p>Les exemples de coloration du code ci-dessous illustrent les modèles de coloration du code d'un document de style en cascade et d'un document JavaScript. Par souci de concussion, les listes de mots-clés de l'exemple JavaScript sont abrégées.</p> <p><h1 id="coloration-du-code-css">Coloration du code CSS</h1></p> <pre><code class="language-xml"><scheme name="CSS" id="CSS" dootypes="CSS" priority="50"> <ignoreCase>Yes</ignoreCase> <ignoreTags>Yes</ignoreTags> <blockStart doypes="ASP-JS, ASP-VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion, CFC, HTML, JSP, LibraryItem, DWTempl ate, PHP_MySQL" scheme="outerTag"><![CDATA[style]]></blockStart> <blockEnd><![CDATA[style]]></blockEnd> <blockStart doypes="ASP-JS, ASP-VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion, CFC, HTML, JSP, LibraryItem, DWTempl ate, PHP_MySQL" scheme="outerTag"><![CDATA[style\s+*]]></blockStart> <blockEnd><![CDATA[style]]></blockEnd> <commentStart name="Comment" id="CodeColor_CSSComment"><![CDATA[/ \*)]></commentStart> <commentEnd><![CDATA[*]]></commentEnd> <endOfLineComment><![CDATA[!--]]></endOfLineComment> <endOfLineComment><![CDATA[-->]]></endOfLineComment> <stringStart name="String" id="CodeColor_CSSString"><![CDATA["]]></stringStart> <stringEnd><![CDATA["]]></stringEnd> <stringStart><![CDATA[']]></stringStart> <stringEnd><![CDATA[']]></stringEnd> <stringEsc><![CDATA[\)]></stringEsc> <cssSelector name="Selector" id="CodeColor_CSSSelector" /> <cssProperty name="Property" id="CodeColor_CSSProperty" /> <cssValue name="Value" id="CodeColor_CSSValue" /> <sampleText doypes="CSS"><![CDATA[/\* Comment */ H2,.head2 { font-family:'Sans-Serif'; font-weight : bold; color : #339999; } ]]> </sampleText> </scheme> </code></pre> <p><h1 id="echantillon-css">Echantillon CSS</h1></p> <p>L'échantillon du modele CSS suivant illustrer le modele de coloration du code CSS :</p> <pre><code class="language-txt">/\*Comment\*/ H2,.head2 { font-family:'Sans-serif'; font-weight :bold; color:#339999; </code></pre> <p>Les lignes suivantes, extraites du fichier Colors.xml, fournissant les valeurs de couleur et de style affichées dans l'échantillon et ont été assignées par le modèle de coloration du code :</p> <pre><code class="language-txt"><syntaxColor id="CodeColor_CSSSelector" text="#FF00FF" /> <syntaxColor id="CodeColor_CSSProperty" text="#000099" /> <syntaxColor id="CodeColor_CSSValue" text="#0000FF" /> </code></pre> <p><h1 id="coloration-du-code-javascript">Coloration du code JavaScript</h1></p> <p><scheme name = "JavaScript" id = "JavaScript" dootypes = "JavaScript" <br />priority = 50 > <ignoreCase>No</ignoreCase> <ignoreTags>Yes</ignoreTags> <blockStart doypes "ASP-JS, ASP- VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion, CFC, HTML, JSP, LibraryItem, DWTempl ate, PHP_MySQL" scheme = "outerTag">[CDATA[<script>]></blockStart> <blockEnd><![CDATA[/script>]]></blockEnd> <blockStart doypes "ASP-JS, ASP- VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion, CFC, HTML, JSP, LibraryItem, DWTempl ate,PHP_MySQL" scheme = "outerTag">[CDATA[<script\s+*>]></blockStart> <blockEnd><![CDATA[/script>]]></blockEnd> <commentStart name = "Comment" id="CodeColor_JavascriptComment">[CDATA[/*]]></commentStart> <commentEnd><![CDATA[\*/]]></commentEnd> <endOfLineComment><![CDATA[/]]></endOfLineComment> <endOfLineComment><![CDATA[\<!--]></endOfLineComment> <endOfLineComment><![CDATA[-->]]></endOfLineComment> <stringStart name = "String" id="CodeColor_JavascriptString">[CDATA["]]></stringStart> <stringEnd><![CDATA["]]></stringEnd> <stringStart><![CDATA[']]></stringStart> <stringEnd><![CDATA[']]></stringEnd> <stringEsc><![CDATA[\]]></stringEsc> <brackets name = "Bracket" id="CodeColor_JavascriptBracket">[CDATA[[()]]]></brackets> <operators name = "Operator" id="CodeColor_JavascriptOperator">[CDATA[+-*/%<>?:=&|^]></operators> <numbers name = "Number" id="CodeColor_JavascriptNumber" /> <regexp name = "RegExp" id="CodeColor_JavascriptRegexp" delimiter="/\" escape = " " > <searchPattern><![CDATA[(\s<em>/\e</em>\/)]></searchPattern></p> <pre><code class="language-html"><searchPattern><![CDATA[\*\\*/\\e\*/]]></searchPattern> </regexp> <idChar1>_abcdefghijkmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</ idChar1> <idCharRest name="Identifier" id="CodeColor_JavascriptIdentifier">_abcdefghijkmnopqrstuvwxyzABCDEFGH IJKLMNOPQRSTUVWXYZ0123456789</idCharRest> <functionKeyword name="Function Keyword" id="CodeColor_JavascriptFunction">function</functionKeyword> <keywords name="Reserved Keywords" id="CodeColor_JavascriptReserved"> <keyword>break</keyword> </keywords> <keywords name="Native Keywords" id="CodeColor_JavascriptNative"> <keyword>abs</keyword> </keywords> <keywords id="CodeColor_JavascriptNumber"> <keyword>Infinity</keyword> <keyword>Nan</keyword> </keywords> <keywords name="Client Keywords" id="CodeColor_JavascriptClient"> <keyword>alert</keyword> </keywords> <sampleText></![CDATA[/* JavaScript */ function displayWords(arrayWords) { for (i=0; i < arrayWords.length(); i++) { // commentaire en ligne alert("Word "+" i + " is " + arrayWords[i]); } } var tokens = new Array("Hello", "world"); displayWords(tokens); ]></sampleText> </scheme> </code></pre> <h1 id="echantillon-javascript">Echantillon JavaScript</h1> <p>L'échantillon du modele JavaScript suivant illustrer le modele de coloration du code JavaScript:</p> <p>* JavaScript */ <br /> function displayWords(arrayWords) { for (i = 0 ; i < _i arrayWords.length(); i++) { // commentaire en ligne alert("Word" ^+ i ^+ " is " + arrayWords[i]); } <br /> 1</p> <pre><code class="language-javascript">var tokens = new Array("Hello", "world"); displayWords(tokens); </code></pre> <p>Les lignes suivantes, extraites du fichier Colors.xml, fournissant les valeurs de couleur et de style affichées dans l'échantillon et ont été assignées par le modele de coloration du code :</p> <pre><code class="language-xml"><syntaxColor id="CodeColor_JavascriptComment" text="#999999" italic="true" /> <syntaxColor id="CodeColor_JavascriptFunction" text="#000000" bold="true" /> <syntaxColor id="CodeColor_JavascriptBracket" text="#000099" bold="true" /> <syntaxColor id="CodeColor_JavascriptNumber" text="#FF0000" /> <syntaxColor id="CodeColor_JavascriptClient" text="#990099" /> <syntaxColor id="CodeColor_JavascriptNative" text="#009999" /> </code></pre> <h1 id="validation-du-code">Validation du code</h1> <p>Lorsque vous ouvrez un document en mode Code, Dreamweaver vérifie automatiquement la validité des balises, attributs, propriétés ou valeurs CSS en fonction des navigateurs cibles spécifique par l'utilisateur. Dreamweaver souligne les erreurs détectées par une ligne ondulée de couleur rouge.</p> <p>Les profils des navigateurs sont stockés dans le dossier Browser Profile du dossier Configuration de Dreamweaver. Chaque profil de navigateur se présente sous la forme d'un filchier texte portant le nom du navigateur. Par exemple, le profil du navigateur Internet Explorer version 6.0 correspond au filchier Internet_Explorer_6.0.txt. Pour prendre en charge la vérification des navigateurs cibles pour CSS, Dreamweaver stocke les informations de profil CSS d'un navigateur dans un filchier XML dont le nom correspond au profil du navigateur, auquel a été ajouté le suffixe_CSS.xml. Par exemple, le profil CSS du navigateur Internet Explorer 6.0 se trouve dans le filchier Internet_Explorer_6.0_CSS.xml. Si vous souhaitez ignorer une erreur signalée par Dreamweaver, vous pouvez modifier le filchier de profil CSS. Le filchier de profil CSS comprend trois balises XML : css-support, property et value. Les sections ci-après fournissent une description de chacune de ces balises.</p> <h1 id="css-support"><css-support></h1> <h1 id="description-54">Description</h1> <ol> <li>Cette balise correspond au nœud racine d'un ensemble de balises property et value prises en charge par un navigateur donné.</li> </ol> <h1 id="attributes-53">Attributes</h1> <p>Néant</p> <h1 id="contenu-19">Contenu</h1> <p>Balises property et value.</p> <h1 id="contenant-18">Contenant</h1> <p>Néant</p> <h1 id="example-58">Example</h1> <p><css-support></p> <p>···</p> <p></css-support></p> <h1 id="property"><property></h1> <h1 id="description-55">Description</h1> <p>Définit une propriété CSS prise en charge par un profil de navigateur.</p> <h1 id="attributes-54">Attributes</h1> <p>name, names, supportlevel, message</p> <p>name="nom_proprieté" Nom de la propriété à prendre en charge. <br /> names="nom_propriété, nom_propriété, ..."装备制造 a prencre en charge. Les différencs noms sont séparés par des virgules.</p> <p>L'attribut names peut être considéré comme une forme abrégée. Par exemple, l'attribut names ci-dessous correspond à une méthode abrégée de définition de l'attribut name qui suit :</p> <pre><code class="language-xml"><property names="foo,bar"> <value type="named" name="top"/> <value type="named" name="bottom"/> </property> <property name="foo"> <value type="named" name="top"/> <value type="named" name="bottom"/> </property> <property name="bar"> <value type="named" name="top"/> <value type="named" name="bottom"/> </property> </code></pre> <ul> <li>supportlevel="error", "warning", "info" ou "supported" Indique le niveau de prise en charge de la propriété. Si aucune valeur n'est indiquée, la valeur attribuée est "supported". Si vous indiquez un niveau de prise en charge différent de "supported" et que vous ne spécifie pas l'attribut message, Dreamweaver utilise le message par défaut, « La propriété CSS nom_proprieté n'est pas prise en charge. » <br /> message="chaine_message" L'attribut message définit la chaine du message affché dans Dreamweaver lorsqu'il détecte la propriété d'un document. La chaine du message déscrit les limites ou les contraintes susceptibles d'apparaitre en fonction de la valeur de la propriété.</li> </ul> <h1 id="contenu-20">Contenu</h1> <p>value</p> <h1 id="contenant-19">Contenant</h1> <p>css-support</p> <h1 id="example-59">Example</h1> <p><property name="background-color" supportLevel="supported"></p> <h1 id="value"><value></h1> <h1 id="description-56">Description</h1> <p>Définit une liste de valeurs prises en charge par la propriété actuelle.</p> <h1 id="attributes-55">Attributes</h1> <p>type, name, names, supportlevel, message,</p> <p>type="any", "named", "units", "color", "string" ou "function" Indique le type de valeur. Si vous spécifie "named", "units" ou "color", l'attribut name ou names doit spécifier les identifiants de valeur correspondant à l'élement. La valeur "units" correspond à une valeur numérique, suivie de l'une des valeurs d'unités spécifiées dans l'attribut name. <br /> name="nom valeur" Identifiqueur de valeur CSS. Les espaces et la ponctuation, à l'exception du tiret (-), sont interdits. Nom de l'une des valeurs valides pour la propriete CSS nommée dans le nœud de propriété parent. Ce nom peut désigner une valeur spécifique ou un spécifiqueur d'unité. <br /> names="nom1, nom2, . . ." Spécífie une liste d'ID de valeur séparés par des virgules. <br /> - supportlevel="error", "warning", "info" ou "supported" Indique le niveau de prise en charge de cette valeur dans le navigateur. Si aucune valeur n'est indiquée, la valeur attribuée est "supported".</p> <p>message="chaîne_message" L'attribut message définit la chaîne du message affché dans Dreamweaver lorsqu'il déetecte la valeur de propriété d'un document. Si vous ne spécifie pas l'attribut message, Dreamweaver affiche la chaîne de message suivante : « nom valeurs n'est pas prise en charge »</p> <h1 id="contenu-21">Contenu</h1> <p>Néant</p> <h1 id="contenant-20">Contenant</h1> <p>property</p> <h1 id="example-60">Example</h1> <pre><code class="language-xml"><property name="margin"> <value type="units" name="ex" supportLevel="warning"> message="The implementation of ex units is buggy in Safari 1.0." </value type="units" names=%, em, px, in, cm, mm, pt, pc /> <value type="named" name="auto"/> <value type="named" name="inherit"/> </property> </code></pre> <h1 id="modification-du-formatage-html-par-défaut">Modification du formatage HTML par défaut</h1> <p>La catégorie Format de code de la boîte de dialogue Préférences permet de modifier les préférences générales de formatage du code. L'éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises) permet de modifier le format de balises ou d'attributs spécifique. Pour plus d'informations, voir Utilisation de Dreamweaver dans le menu Aide de Dreamweaver.</p> <p>Voupez egalent modifier le formatage d'une balise en modifient le fichier VTM correspondant à cette balise (dans un sous-dossier du dossier de configuration Tag Libraries); il est toutefois préféable de modifier le formatage directement dans l'application Dreamweaver.</p> <p>Si vous ajoutez ou que vous supprimez un fjichier VTM, vous doivent modifier le fjichier TagLibraries.vtm ; Dreamweaver ignore les fjichiers VTM non répertoriés dans le fjichier TagLibraries.vtm.</p> <p>Modifiez ce fichier dans un éditeur de texte et non dans Dreamweaver.</p> <h1 id="partie-2">PARTIE 2</h1> <h1 id="présentation-de-extension-de-dreamweaver">Présentation de Extension de Dreamweaver</h1> <h1 id="2">2</h1> <p>Maitrisesz les fondements de l'interface Macromedia Dreamweaver 8 et apprenez à étendre Dreamweaver selon vos besoin de développement Web. Ces fondements comprehennent les dossiers Dreamweaver, les API d'extension, les composants d'interface de Dreamweaver, le modele d'objet de document (DOM) et les types de documents de Dreamweaver.</p> <p>Chapitre 3: Extension de Dreamweaver 105</p> <p>Chapitre 4: Interfaces utiliseur destinées aux extensions . . . .117</p> <p>Chapitre 5: Modèle d'objet de document (DOM) Dreamweaver 133</p> <p>Vou creez en ringle generale une extension Dreamweaver pour executer l'un des types de tâche suivants :</p> <p>automatisation des modifications apportées au document actif de l'utilisateur, telles que l'insertion de code HTML, CFML ou JavaScript, la modification des propriétés du texte et des images ou le tri des tableaux ; <br /> ■ interaction avec l'application pour l'ouverture ou la fermetre automatique des fenêtres ou des documents, le changement des raccourcis clavier, etc. ; <br /> - connexion aux sources de données, permettant aux utilisateurs de Dreamweaver de créé dynamiquement des pages adaptées aux données; <br /> insertion et gestion de blocs de code de serveur dans le document actif.</p> <p>Il peut se révêler judicieux de rédigier une extension pour le traitement d'une tâche féquence et donc repétitive. Il se peut également qu'un problème donné ne puisse être résolu qu'en rédigeant une extension spécifique à cette situation. Quoi qu'il en soit, l'ensemble compte d'outils proposés par Dreamweaver vous permettra d'étendre ou de personneliser ses fonctionnalités.</p> <p>Pour creer une extension Dreamweaver, executez la procedure decrite à la section Creation d'une extension, page 10.</p> <p>Les fonctions suivantes de Macromedia Dreamweaver 8 vous permettent de créé des extensions :</p> <ul> <li>Un analyseur HTML (également appelé module de rendu), qui permet de conceiveir des interfaces utilisateur pour les extensions en utilisant des champs de formulaires, des calques, des images et d'autres éléments HTML. Dreamweaver dispose de son propre analyseur HTML. </li> <li>Une arborescence de dossiers qui organise et stocke les fichiers qui implémentent et configurent les éléments et extensions de Dreamweaver. </li> <li> <p>Une série d'API (interfaces de programmation d'applications), qui donnent accès à la fonctionnalité de Dreamweaver au moyen du langage JavaScript.</p> </li> <li> <p>Un interpréteur JavaScript, qui exécute les instructions de code JavaScript dans les fichiers d'extension. Dreamweaver utilise l'interpréteur Netscape JavaScript version 1.5. Pour plus d'informations sur les différences qui existent entre cette version de l'interpréteur et les précédentes, voir Traitément de JavaScript dans les extensions par Dreamweaver, page 113.</p> </li> </ul> <h1 id="types-dextensions-dreamweaver">Types d'extensions Dreamweaver</h1> <p>La liste ci-dessous décrit les types d'extensions Dreamweaver représentés dans ceguide.</p> <p>Les extensions d'objet de la barre Insérer sont responsables des modifications dans la barre Insérer. Un objet sert généralement à automatiser l'insertion de code dans un document. Il peut également contir un formulaire qui regroupe les données fournies par les utilisateurs et un code JavaScript quiTRAITE ces données. Les fichiers d'objet résident dans le dossier Configuration/Objects.</p> <p>Les extensions de commande peuvent se charger de la plupart des tâches, avec ou sans l'intervention de l'utilisateur. Les fichiers de commandes sont généralement appelés à partir du menu Commandes ; ils peuvent l'être également depuis d'autres extensions. Les fichiers de commandes résident dans le dossier Configuration/Commands.</p> <p>Les extensions de commande de menu développent l'API de commandes pour effectuer des tâches relatives à l'appel d'une commande depuis un menu. Les API des commandes de menu vous permettent également de créé un sous-menu dynamique.</p> <p>Les extensions de barre d'outils permettent d'ajouter des éléments aux barres d'outils existantes ou de creer de nouvelles barres d'outils dans l'interface utiliser de Dreamweaver. Les nouvelles barres d'outils s'affichent sous la barre d'outils par défaut. Les fichiers de barre d'outils résident dans le dossier Configuration/Toolbars.</p> <p>Les extensions de rapport peuvent ajouter des rapportes personnalisés sur le site ou modifier le jeu de rapportes prédéfinis fournis avec Dreamweaver. Vous pouze également utiliser l'API de fenêtre Résultats pourisser un rapport autonome.</p> <p>Les extensions de bibliothèque et d'éditeur de balises fonctionnent avec les fichiers de bibliothèque de balises associés. Les extensions de bibliothèque et d'éditeur de balises permettent de modifier les attributs des boîtes de dialogue de balises existantes, de créé de nouvelles boîtes de dialogue de balises et d'ajouter des balises à la bibliothèque de balises. Les fichiers d'extension d'éditeur et de bibliothèques de balises résident dans le dossier Configuration/TagLibraries.</p> <p>Les extensions d'inspecteur de propriétés apparaissent dans le panneau d'inspecteur Propriétés. La plupart des inspecteurs de Dreamweaver relevant du code principal du produit et ne sont donc pas modifiables ; en revanche, les fichiers d'inspecteurs de propriétés personalisés peuvent remplancer les interfaces d'inspecteurs de propriétés intégrées de Dreamweaver ou enmakerafin d'inspecter les balises personalisées. Les fichiers d'inspecteur résident dans le dossier Configuration/Inspectors.</p> <p>Les extensions de panneau flottant permettent d'insérer des panneaux flottants dans l'interface utilisateur de Dreamweaver. Les panneaux flottants peuvent interagir avec la selection, le document ou l'action en cours. Ils peuvent également afficher des informations utiles. Les fichiers de panneau résident dans le dossier Configuration/Floaters.</p> <p>Les extensions de comportement permettent aux utilisateurs d'ajouter du code JavaScript dans leurs documents. Le code JavaScript exécute une tâche spécifique en réponse à un événement lorsque le document est affché dans un navigateur. Les extensions de comportement s'affichent dans le menu plus (+) du panneau Comportements de Dreamweaver. Les fichiers de comportement résident dans le dossier Configuration/Behaviors/Actions.</p> <p>Les extensions de comportement de serveur permettent d'ajouter des blocs de code côté serveur (ASP, JSP ou ColdFusion) au document. Le code côté serveur exécute des tâches sur le serveur lorsque le document est affché dans un navigateur. Les extensions de comportement de serveur s'affichent dans le menu plus (+) du panneau Comportements de serveur de Dreamweaver. Les fichiers de comportement de serveur résident dans le dossier Configuration/Server Behaviors.</p> <p>Les extensions de source de données vous permettent d'étabrir une connexion avec des données dynamiques stockées dans une base de données. Les extensions de source de données apparaissent dans le menu plus (+) du panneau Liaisons. Les extensions de source de données resident dans le dossier Configuration/DataSources.</p> <p>Les extensions de format de serveur vous permettent de définir la mise en forme des données dynamiques.</p> <p>Les extensions de composant vous permettent d'ajouter de nouveaux types de composants au panneau Composants. Composants est le terme utilisé dans Dreamweaver pour définir une des stratégies les plus récentes et populaires d'encapsulation, y compris les services Web, JavaBeans, et les composants ColdFusion (CFC).</p> <p>Les extensions de modele de serveur permettent de prendre en charge de nouveaux modles de serveurs. Dreamweaver prend en charge les modles de serveurs les plus courants (ASP, JSP, ColdFusion, PHP et ASP.NET). Les extensions de modele de serveur sont nécessaires uniquement pour les solutions de serveur personalisées, des langues différentes ou un serveur personnelisé. Les fichiers de modele de serveur résident dans le dossier Configuration/ServerModels.</p> <p>Les extensions de traducteur de données convertissent le code non HTML en code HTML qui s'affiche ensuite dans le mode Creation de la fenetre de document. Ces extensions bloquent également le code non HTML pour empêcher toute analyse par Dreamweaver. Les fichiers de traducteur résident dans le dossier Configuration/Translators.</p> <h1 id="autres-méthodes-dextension-pour-dreamweaver">Autres méthodes d'extension pour Dreamweaver</h1> <p>Vou puez également étendre les éléments suivants de Dreamweaver pour développer ses capacités ou l'adapter à votre utilisation.</p> <p>Les types de documents définissant le fonctionnement de Dreamweaver avec différents modèles de serveur. Les informations relatives aux types de documents pour les modèles de serveurs résident dans le dossier Configuration/DocumentTypes. Pour plus d'informations, consultez la section Types de documents extensibles dans Dreamweaver, page 37.</p> <p>Les fragments de code sont des blocs de code réutilisables qui sont stockés sous forme de fichiers CSN dans le dossier Configuration/Snippets de Dreamweaver. Ils sont accessibles dans le panneau Fragments de code. Vous pouvez créé de nouveaux fichiers de fragment de code et les installer dans le dossier Snippets afin qu'ils soient disponibles.</p> <p>Les indicateurs de code sont des menus qui vous évient de saisir tout le texte en proposant une liste de chaînes susceptibles de compléter la chaine que vous tapez. Si une des chaînes du menu correspond à cette que vous avez commencé à entrer, vous pouvez la sélectionner pour l'insérer à la place de la chaine dont vous aviez commencé la saisie. Des menus d'indicateurs de code sont définis dans le fichier codehints.xml dans le dossier Configuration/CodeHints. Vous pouvez en ajouter d'autres pour de nouvelles balises et fonctions que vous avez définies.</p> <p>Les menus sont définis dans le fichier menus.xml du dossier Configuration/Menu. Vous pouvez ajouter de nouveaux menus Dreamweaver pour vos extensions en ajoutant leurs balises de menu dans le fichier menus.xml. Pour plus d'informations, consultez la section Chapitre 8, "Menu et commandes de menu," on page 191.</p> <h1 id="extensions-et-dossiers-de-configuration">Extensions et dossiers de configuration</h1> <p>Les dossiers et les fichiers stockés dans le dossier Configuration de Dreamweaver contennent les extensions livrées avec Dreamweaver. Lorsque vous rédigez une extension, vous devez enregistrer les fichiers dans le dossier approprié afin que Dreamweaver puisse les reconnaître. Ainsi, si vous créEZ une extension d'inspecteur de propriétés, vous enregistrez les fichiers dans le dossier Configuration/Inspectors. Si vous téléchargez puis installez une extension depuis le site Web de Macromedia Exchange (www.macromedia.com/go/exchange_fr), Extension Manager enregistrtre automatiquement les fichiers d'extension dans les dossiers appropriés.</p> <p>Voupeu posses utiliser les fichiers du dossier Configuration de Dreamweaver comme exemple ; notes toutefois que ces fichiers sont généralement plus complexes que l'extension typique disponible sur le site Web de Macromedia Exchange. Pour plus d'informations sur le contenu respectif des sous-dossiers du dossier Configuration, voir le fjchier Configuration_ReadMe.htm.</p> <p>Le dossier Configuration/Shared ne correspond àaucun type d'extension particulier. Il s'agit d'un lieu de stockage central pour les fonctions utilisaires,les classes et les images utilisées par plusieurs extensions.Les fichiers résident dans le dossier Configuration/Shared/Common sont censés estre utiles a un large éventail d'extensions.Ces fichiers constituenta la fois de bons examples des techniques JavaScript et des utilitaires pratiques.Recherche en priorité dans ces fichiers les fonctions executant des tâches spécifiques,par exemple creator une reférence DOM (modèle d'objet de document) valide pour un objet,vérifier si la selection active se trouvá à l'intérieur d'une balise particulière,ignorer les caractères dans les chaînes,etc. Il est préféable de créé un sous-dossier distinct dans le dossier Configuration/Shared/Common, comme indiqué ci-après, lorsque vous créez des fichiers commons afin de les stocker.</p> <p><img alt="" src="images/66b22751d08e794dcd75f487609db451a4cecace7224c39ee4a4fec2aa2aae20.jpg" /></p> <p>Structure de dossier Configuration/Shared/Common/Scripts</p> <p>Pour plus d'informations sur le dossier partagé, voir Annexe, "Dossier Shared," on page 505.</p> <h1 id="dossiers-de-configuration-multiutilisateur">Dossiers de configuration multiutilisateur</h1> <p>Pour les systèmes d'exploitation multiutilisateurs Windows XP, Windows 2000 et Macintosh OS X, Dreamweaver create un dossier de configuration distinct pour chaque utilisateur, en complément du dossier Configuration Dreamweaver. Chaque fois que Dreamweaver ou qu'une extension JavaScript écrit dans le dossier Configuration, Dreamweaver écrit systématiquement dans le dossier de configuration utilisateur. Ceci permet à chaque utilisateur de définir ses paramètres de personnelisation de Dreamweaver sans modifier les paramètres d'autres utilisateurs. Pour plus d'informations, voir Personnalisation de Dreamweaver dans un environnement multi-utilisateurs, page 29 et API de configuration multiutilisateur et d'accès aux fischiers dans le Guide des API de Dreamweaver.</p> <h1 id="exécution-des-scripts-au-démarrage-ou-à-la-fermeture">Exécution des scripts au démarrage ou à la fermeture</h1> <p>Si vous placez un fischi er de commandes dans le dossier Configuration/Startup, la commande s'execute au demarrage de Dreamweaver. Les commandes de demarrage se chargent avant le fischi er menus.xml, avant les fischiers du dossier ThirdPartyTags et avant les autres commandes, objets, comportements, inspecteurs, panneaux flottants ou traducteurs. Par consequencer, vous pouze utiliser les commandes de demarrage pour modifier le fischi er menus.xml ou d'autres fischiers d'extension. Vous pouze également afficher des avertissements, inviter l'utilisateur à donner des informations ou appeler la fonction dreamweaver.runCommand(). Toutefois, vous ne pouze pas appeler une commande qui nécessite un DOM (Document Object Model) valide à partir du dossier Startup. Pour plus d'informations sur le DOM Dreamweaver, voir le Chapitre 5, "Modèle d'objet de document (DOM) Dreamweaver," on page 133.</p> <p>De même, si vous placez un fisier de commandes dans le dossier Configuration/Shutdown, la commande s'exécuté à l'arrêt de Dreamweaver. A partir des commandes de fermeture, vous pouvez appeler la fonction dreamweaver.runCommand(), afficher des averisations ou inviter l'utilisateur à entrer des informations, mais vous ne pouvez pas arrêter le processus de fermeture.</p> <p>Pour plus d'informations sur les commandes, voir Chapitre 7, "Commandes," on page 177. Pour plus d'informations sur la fonction dreamweaver.runCommand(), voir le Guide des API de Dreamweaver.</p> <h1 id="rechargez-les-extensions">Rechargez les extensions.</h1> <p>Si vous modifiez une extension pendant que vous utilisez Dreamweaver, vous pouvez la recharger pour permettre à Dreamweaver d'identifier la modification.</p> <h1 id="pour-recharger-les-extensions">Pour recharger les extensions :</h1> <ol> <li> <p>Appuyez sur la touche Contrôle (Windows) ou Option (Macintosh) tout en cliquant avec la souris sur le menu affichant les catégories dans la barre de titre de la barre Insérer.</p> </li> <li> <p>Commun<br /> Mise en forme<br /> Formulaires<br /> Texte<br /> HTML<br /> PHP<br /> Application<br /> Éléments Flash<br /> Favoris</p> </li> <li> <p>Sélectionnez Recharger extensions.</p> </li> </ol> <h1 id="remarque-11">REMARQUE</h1> <p>Notez que sur un système d'exploitation multi-utilisateurs, vous devez modifier les copies des fichiers de configuration stockées dans votre dossier Configuration et non les fichiers de configuration principaux. Pour plus d'informations, consultez la section Extensions et dossiers de configuration, page 109.</p> <h1 id="api-dextension">API d'extension</h1> <p>Les API d'extension vous fournissent les fonctions appelées par Dreamweaver pour implémenter chaque type d'extension. Le corps de ces fonctions doit être rédigé conformément aux descriptions de chaque type d'extension. Il faut également spécifique les valeurs renvoyées attendues par Dreamweaver.</p> <p>Si vous étés développer et souhaitez travailler directement en langage de programmation C, vous disposez d'une API d'extensibilité C qui vous permet de créé des DLL (bibliothèques de liens dynamiques). La fonctionnalité fournie dans ces API enveloppe vos DLL C de code JavaScript afin que votre extension puisse s'exécuter en toute transparence dans Dreamweaver.</p> <p>La documentation des API d'extension souligne ce qu'apporte chaque fonction quand Dreamweaver l'appelle et les valeurs renvoyées attendues par Dreamweaver.</p> <p>Consultez le Guide des API de Dreamweaver pour plus d'informations sur l'API d'utilitaire et l'API JavaScript, qui proposent des fonctions permettant d'effectuer des tâches spécifique dans vos extensions.</p> <h1 id="traitement-de-javascript-dans-les-extensions-par-dreamweaver">Traitement de JavaScript dans les extensions par Dreamweaver</h1> <p>Dreamweaver vérifie le dossier Configuration/extension_type au démarrage. Si Dreamweaver y détecte un fisier d'extension, ilTRAITE le code JavaScript selon la procEDURE suivante:</p> <p>■ Compilation de tous les éléments compris entre les balises d'ouverture et de fermetre SCRIPT <br /> ■ Execution du codeitué dans les balisesSCRIPTne faisant pas partie d'une déclaration de fonction</p> <h1 id="remarque-12">REMARQUE</h1> <p>Cette étape s'impose pendant le démarriage dans la mesure où certaines extensions peuvent nécessiter l'initialisation des variables globales.</p> <p>Dans le cas des fichiers JavaScript externes spécifiés dans les attributs SRC des balises SCRIPT, Dreamweaver se charge des opérations suivantes :</p> <p>lecture du fichier ; <br /> ■ compilation du code ; <br /> exécution des procédures.</p> <h1 id="remarque-13">REMARQUE</h1> <p>Si un code JavaScript intégré à votre fisier d'extension contient la chaine "</SCRIPT>", l'interpréteur JavaScript la lit comme une balise SCRIPT de fermeture et signale une erreur littérale de chaine non terminée. Pour éviter ce problème, divise la chaine en parties concatenatedes comme suit : "<' + '/SCRIPT'".</p> <p>Dreamweaver execute le code contenu dans le gestionnaire d'evénements onLoad (s'il est present dans la balise BODY) lorsque l'utilisateur可以选择 la commande ou l'action dans un menu pour les types d'extensions de commande ou de comportement.</p> <p>Dreamweaver execute le code contenu dans le gestionnaire d'evénements onLoad dans la balise BODY si le corps du document contient un formualeir pour les extensions d'objet.</p> <p>Dreamweaver ignore le gestionnaire onLoad de la balise BODY dans les extensions suivantes :</p> <p>traducteur de données; <br /> ■ Inspecteur de propriétés <br /> Panneau flottant</p> <p>Pour toutes les extensions, Dreamweaver exécute le code contenu dans d'autres gestionnaires d'événements (par exemple, onBlur="alert('Ceci est un champ obligatoire.')") lorsque l'utilisateur utilise les champs de formulaire auxquels ils sont rattachés.</p> <p>Dreamweaver prend en charge l'utilisation de gestionnaires d'evénement dans des liens. Les gestionnaires d'evénements des liens doivent respecter la syntaxe suivante :</p> <p>Les <ahref="#" onMouseDown=alert('hi')>link text</a></p> <p>plug-ins (réglés sur play en permanence) sont pris en charge dans la balise BODY des extensions. En revanche, l'instruction document.write(), les applets Java et les commandes ActiveX ne sont pas générées.</p> <h1 id="affichage-de-laide">Affichage de l'aide</h1> <p>La fonction displayHelp(), qui fait partie de nombreux API d'extension, entraîne les deux actions suivantes de Dreamweaver lorsque vous l'incluez dans votre extension :</p> <p>Ajout d'un bouton d'aide à l'interface ; <br /> Appelle displayHelp() lorsque l'utilisateur clique sur le bouton d'aide.</p> <p>Vous doivent rédigier le corps de la fonction displayHelp() pour afficher l'aide. La façon dont vous codez la fonction displayHelp() détermine l'affichage de l'aide par votre extension. Vous pouvez demander à la fonction dreamweaver.browseDocument() d'ouvrir un fisquier dans un navigateur ou de définir une méthode personnalisée d'affichage de l'aide, comme l'affichage de messages sur un autre calque dans des fenêtres d'alerte.</p> <pre><code class="language-javascript">L'exemple suivant utilise la fonction displayHelp() pour afficher l'aide en appelant dreamweaver.browseDocument(): // Dans l'exemple suivant, la fonction displayHelp() ouvre dans un navigateur un fichier // expliquant comment utiliser l'extension. function displayHelp() { var myHelpFile = dw.getConfigurationPath() + "ExtensionsHelp/myExtHelp.htm"; dw.browseDocument(myHelpFile); } </code></pre> <h1 id="localisation-dune-extension">Localisation d'une extension</h1> <p>Utilisez les techniques suivantes pour faciliter la traduction de vos extensions dans d'autres langues.</p> <ul> <li>Séparez les extensions entre fischiers HTML et JavaScript. Les fischiers HTML peuvent être dupliqués et localisés, alors que les fischiers JavaScript ne peuvent pas être localisés. </li> <li>Ne définisse pas dechains dans les fischiers JavaScript (verifiez les alertes et le code de l'interface utilisé). Vous doivent extraire toutes leschains localisables en fischiers XML séparés dans le dossier Configuration/Strings de Dreamweaver.</li> </ul> <p>N'insérez pas de code JavaScript dans les fischiers HTML excepté pour les gestionnaires d'évenement nécessaires. Ceci évite d'avoir à réparer plusieurs fois une même erreur pour chaque traduction une fois les fischiers HTML répliqués et traduits dans d'autres langues.</p> <h1 id="fichiers-de-chaîne-xml">Fichiers de chaîne XML</h1> <p>Conservez toutes leschains dans des fichiers XML dans le dossier Configuration/Strings de Dreamweaver. Si vous installez plusieurs fichiers d'extension liés, cela vous permet de partager toutes leschains dans un seul fjchier XML. Le cas échéant, cela vous permet également de faire référence à une même chaine depuis des extensions C + + et JavaScript.</p> <p>Vou puevez creer un fjichier nomme myExtensionStrings.xml. L'exemple suivant montre le format du fjichier :</p> <pre><code class="language-html"><strings> <!-- errors for feature X --> <string id="featureX/subProblemY" value="There was a with X when you did Y. Try not to do Y!"/> <string id="featureX/subProblemZ" value="There was another problem with X, regarding Z. Don't ever do Z!"/> </strings> </code></pre> <p>Vos fichiers JavaScript peuvent Maintenant se référer à ces chaînes traduisibles en appelant la fonction dw.loadString(), ainsi que l'illustrer l'exemple suivant:</p> <pre><code class="language-javascript">function initializeUI() { ... if (problemYhasOccured) { alert(dw.loadString("featureX/subProblemY")); } </code></pre> <p>Vouss pouvez utiliser des barres obliques (/), mais pas d'espaces dans vos identificateurs de chaînes. Les barres obliques vous permettent d'étabrir une hierarchie et d'inclure l'ensemble des chaînes dans un fjichier XML unique.</p> <p>Les fichiers commençant par cc dans le dossier Configuration/Strings sont des fichiers Contribute. C'est le cas, par exemple, du fichier ccSiteStrings.xml.</p> <h1 id="chaines-localisables-avec-valeurs-intégrées">Chaines localisables avec valeurs intégrées</h1> <p>Certaineschainsd'affichage comportent des valeurs integreees. Vous pouvez utiliser la fonction errMsg() pour afficher ceschains. La fonction errMsg(), similaire à la fonction printf() dans C, se trouve dans le fichier string.js du dossier Configuration/Shared/MM/Scripts/CMN. Utilizez le signe % et la dette (les caractères de l'espace réservé) pour indiquer l'emplacement où les valeurs doivent apparaître dans la chaine, puis transmettez la chaine et les variables (en tant qu'arguments) à errMsg(). Exemple :</p> <pre><code class="language-txt"><string id="featureX/fileNotFoundInFolder" value="File %s could not be found in folder %s.”/> </code></pre> <p>L'exemple suivant indique comment la chaine, ainsi que toute variable à imbriquer, est transmise à la fonction alert().</p> <pre><code class="language-txt">if (fileMissing) { alert(errMsg(dw.loadString("featureX/fileNotFoundInFolder"), fileName, folderName)); } </code></pre> <h1 id="utilisation-de-extension-manager">Utilisation de Extension Manager</h1> <p>Si vous creez des extensions destinées à d'autres utilisateurs, il convient de les conditionner conformément aux indications disponibles sur le site Web de Macromedia Exchange (www.macromedia.com/go/exchange_fr), sous la rubrique Help > How to Create an Extension (Aide, Comment créé une extension). Àpès avoir rédigé puis testé une extension dans Extension Manager, Sélectionnez Fichier > Empaqueter une extension. Une fois l'extension conditionnée, vous pouvez l'envoyer sur Exchange à partir de Extension Manager ; pour cela, Sélectionnez Fichier > Envoyer une extension.</p> <p>Extension Manager est livré avec Dreamweaver. Vous trouvrez des détails sur son'utilisation dans ses fichiers d'aide ou sur le site Web Macromedia Exchange.</p> <h1 id="interfaces-utiliser-destinées-aux-extensions">Interfaces utiliser destinées aux extensions</h1> <p>4</p> <p>La plupart des extensions sont conçues pour receivevoir des informations de l'utilisateur par le biais d'une interface utilisateur (IU). Ainsi, si vous creez une extension d'inspecteur de propriétés associée à la balise marquee, vous doivent permettre à l'utilisateur de spécifique des attributs tels que la direction et la hauteur. Si vous envisagez de demander la certification Macromedia pour votre extension, voirlez à suivre les consignes disponibles dans les fichiers de Extension Manager sur le site Web de Macromedia Exchange (www.macromedia.com/go/exchange_fr). Ces consignes n'ont pas pour objet de limiter votre créativité, mais d'assurer le bon fonctionnement des extensions certifiées dans l'interface utilisateur de Macromedia Dreamweaver 8 et de vérifier que la conception de l'interface utilisateur de l'extension n'entrave pas sa fonctionnalité.</p> <h1 id="conception-dune-interface-utilisateur-dextension">Conception d'une interface utilisateur d'extension</h1> <p>En général, une extension est créé pour effectuer une tâche que l'utilisateur rencontres fréquement. Certaines parties de la tâche étant répétitives, une extension permet de les automatiser. Plusieurs étapes de cette tâche ou attributs spécifique du code traité par l'extension peuvent être modifiés. Pour receivevoir les entrées utilisateur de ces valeurs variables, vous doivent creer une interface utilisateur.</p> <p>Vou puez par exemple创建工作 une extension de mise à jour d'un catalogue de vente sur le Web. Les utilisateurs doivent régulierement modifier les valeurs des sources d'image, des descriptions d'articles et des prix. Bien que les valeurs évoluent, les procédures d'extraction de ces dernières et de mise en forme des informations à afficher sur le site Web demeurent identiques. Une extension simple peut automatiser la mise en forme, tout en laissant aux utilisateurs le sein d'entrée manuellement les valeurs actualisées des sources d'image, des descriptions d'articles et des prix. Une extension plus complexe peut extraire régulierement ces valeurs d'une base de données.</p> <p>L'interface utiliser de votre extension a pour objet de receivevoir les informations entées par l'utilisateur. Ces informations gèrent les aspects variables d'une tâche répétitive exécutés par l'extension. Dreamweaver prend en charge les éléments de formulaires HTML et JavaScript comme modules de base de la structure des commandes d'interface utiliser d'extension et affiche l'interface au moyen de son outil de rendu HTML. Ainsi, une interface utiliser d'extension peut seprésenter sous la forme d'un simple fichier HTML contenant un tableau à deux colonnes, composé de textes descriptifs et de champs de saisie de formulaire.</p> <p>Lorsque vous conceivez une extension, vous devez déterminer les variables requises et les éléments de-formulaire appropriés à ces dernières.</p> <p>Veillez à tener compte des observations suivantes pendant la conception d'une interface utilisateur d'extension :</p> <p>Pour attribuer un nom à votre extension, indiquez-le dans la balise titre de votre fournir HTML. Dreamweaver affiche ce nom dans la barre de titre Extension. <br /> - Alignez à droite les étiquettes de texte dans la partie gauche de l'interface utilisateur, et alignez à gauche les zones de texte dans la partie droite. Cette disposition permet à l'utilisateur de repérer plus facilement le début d'une zone de texte. La zone de texte peut être suivie d'un texte concis, par exemple une explication ou une unité de mesure. <br /> - Alignez à gauche le libellé des cases à cocher et des boutons radio dans la partie droite de l'interface utilisateur. <br /> Dans le cas de code lisible, attribuez un nom logique aux zones de texte. Si vous creez votre interface utilisateur d'extension à l'aide de Dreamweaver, vous pouvez utiliser l'inspecteur des propriétés ou Quick Tag Editor pour nommer les champs.</p> <p>Le scenario typique consiste, une fois l'interface utiliseur createe, a verifier que le code de l'extension execute correctement les taches suivantes impliquant l'interface :</p> <p>Récupération des valeurs des zones de texte <br /> Définition des valeurs par défaut des zones de texte ou collecte des valeurs à partir de la seLECTION <br /> Application des modifications au document de l'utilisateur</p> <h1 id="commande-de-rendu-html-de-dreamweaver">Commande de rendu HTML de Dreamweaver</h1> <p>Jusqu'à la version 4, Dreamweaver restituait plus d'espace autour des commandes de formulaire que Microsoft Internet Explorer et Netscape Navigator. Dreamweaver ayant recours à son moteur de rendu HTML pour afficher les interfaces utilisateur d'extension, les commandes de formulaire de celles-ci sont plus spacieuses.</p> <p>Macromedia a amélioré le rendu des commandes de formulaire afin qu'il corresponde plus précisé à celui des navigateurs. Pour bénéficier des améliorations du procédé de rendu, il convient d'utiliser l'une des trois nouvelles instructions DOCTYPE dans les fichiers d'extension, comme indiqué dans l'exemple suivant :</p> <pre><code class="language-txt"><!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> </code></pre> <pre><code class="language-txt"><!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine5.0//floater"> </code></pre> <pre><code class="language-txt"><!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine5.0//pi"> </code></pre> <p>En règle générale, les instructions DOCTYPE doiventfigurer sur la première ligne d'un document. Néanmoins, afin d'éviter des conflits avec les directives spécifiques aux extensions qui, dans les versions antérieures, devaient se trouver sur la première ligne d'un fichier (par exemple, le commentaire en haut d'un fichier de l'inspecteur des propriétés ou la directive MENU-LOCATION NONE d'une commande), l'ordre des directives et les instructions DO TYPE important peu, tant qu'elles figurent avant la balise html d'ouverture.</p> <p>Les instructions DOCTYPE inédites permettent non seulement de créé des interfaces utilisateur d'extension moins assorted aux boîtes de dialogue et aux panneaux intégrés, mais également d'afficher vos extensions dans le mode Création de Dreamweaver, de façon à ce que vous puissiez les voir comme le pourrait un utilisateur.</p> <p>Les exemples suivants montrent l'inspecteur des propriétés de base sans l'instruction DOCTYPE, qui améliore le rendu des commandes de formulaire, puis avec l'instruction DOCTYPE.</p> <p><img alt="" src="images/7a6a2740af52a60b190dcc441fde1104e766d96fe2be6025c533bf2c5c8de035.jpg" /></p> <p>L'inspecteur des propriétés de base tel qu'il apparait en mode Création sans l'instruction DOCTYPE.</p> <p><img alt="" src="images/090ed4b842035bf142c11921765909b1c342fbb3117b8b9e1aaa79e798b69bea.jpg" /></p> <p>L'inspecteur des propriétés de base tel qu'il apparait en mode Création avec l'instruction DOCTYPE (à la suite de quelques réglages pour l'adapter au nouveau rendu).</p> <h1 id="utilisation-de-commandes-dinterface-utilisateur-personnalisées-dans-les-extensions">Utilisation de commandes d'interface utilisateur personnalisées dans les extensions</h1> <p>Outre les éléments de formulaire HTML standard, Dreamweaver prend en charge des commandes personalisées qui facilitent la création d'interfaces flexibles et professionnelles, comme suit :</p> <ul> <li>listedes de selection modifiables (egalement appelées des zones de liste modifiables), pour associer la fonctionnalité d'une liste à celle d'une zone de texte : </li> <li>commandes de base de données, pour simplifier l'affichage des hierarchies et champs de données : </li> <li>commandes d'arborescence qui organisent les informations en nœuds extensibles et réductibles ; </li> <li>commandes de bouton couleur, pour ajouter une interface de selectingeur de couleurs à vos extensions.</li> </ul> <h1 id="listes-de-sélection-modifiables">Listes de sélection modifiables</h1> <p>Nombre d'interfaces utilisateur d'extension sont constituées de listes déroulantes définies à l'aide de la balise select. Dans Dreamweaver, vous pouvez autoriser la modification de ces listes dans les extensions en ajoutant l'instruction editable="true" à la balise select. Pour définiir une valeur par défaut, il convient de définir l'attribut editText ainsi que la valeur que vous pouze voir apparaitre dans la liste de selection.</p> <p>L'exemple suivant illustrer les paramêtres d'une liste de sélection modifiable :</p> <pre><code class="language-xml"><select name="travelOptions" style="width:250px" editable="true" editText="other (please specify)"> <option value="plane">plane</option> <option value="car">car</option> <option value="bus">bus</option> </select> </code></pre> <p>Lorsque vous utilisez des listes de selection dans vos extensions, vérifie la présence d'un attribut et, le cas échéant, sa valeur. En l'absence d'une valeur, la liste de selection renvoie la valeur par défaut false, laquelle indique que la liste de selection n'est pas modifiable.</p> <p>A l'instar des listes de sélection standard non modifiables, les listes de sélection modifiables contiennent la propriété选atedIndex (voir Objects, propriétés et méthodes du DOM Dreamweaver, page 135), laquelle renvoie la valeur -1 lorsque la zone de texte est sélectionnée.</p> <p>Pour lire la valeur d'une zone de texte modifiable active dans une extension, il suffit de dire la valeur de la propriété editText. La propriété editText renvoie la chaîne saisie par l'utilisateur dans la zone de texte modifiable, la valeur de l'attribut editText ou une chaîne vide si aucun texte n'a été entrez et aucune valeur n'a été spécifiée pour la propriété editText. Dreamweaver ajoute les attributs personalisés suivants à la balise select afin de contrôler les listes déroulantes modifiables :</p> <table><tr><td>Nom d'attribut</td><td>Description</td><td>Valeurs admises</td></tr><tr><td>editable</td><td>Déclare que la liste déroulante contient une zone de texte modifiable.</td><td>Une valeur boolée neufou false</td></tr><tr><td>editText</td><td>Conserve ou définit le texte dans une zone de texte modifiable.</td><td>Chaine d'une valeurquelconque</td></tr></table> <p>Des listes de selection modifiables sont disponibles dans Dreamweaver.</p> <p>L'exemple suivant create une extension de commande contenant une liste de selection modifiable à l'aide de fonctions JavaScript standard :</p> <h1 id="procedez-comme-suit-pour-creer-lexemple-dextension">Procedez comme suit pour creer l'exemple d'extension :</h1> <ol> <li>Crééz un fischi er vide dans un éditeur de texte. </li> <li>Entre le code suivant:</li> </ol> <pre><code class="language-html"><html> <head> <title>Editable ↓Drotpwn Test</title> <script language="javascript"> function getAlert() { var i=document.myForm.mySelect.getSelectedIndex; if (i>=0) alert("Selected index: "+i+"\n"+"Selected text "+document.myForm.mySelect.options[i].text); else alert("Nothing is selected"+"\n"+"or you entered a value"); } } function commandButtons() </code></pre> <pre><code class="language-html">{ return new Array("OK", "getAlert(), "Cancel", "window.close()); } </script> </head> <body> <div name="test"> <form name="myForm"> <table> <tr> <td colspan="2"> <h4>Select your favorite</h4> </td> </tr> <tr> <td>Sport:</td> <td> <select name="mySelect" editable="true" style="width:150px" editText="Editable Text"> <option> Baseball</option> <option> Football </option> <option> Soccer </option> </select> </td> </tr> </table> </form> </div> </body> </html> </code></pre> <ol> <li>Enregistrez le fjichier sous le nom EditableSelectTest.htm dans le dossier Dreamweaver Configuration/Commands.</li> </ol> <h1 id="procedez-comme-suit-pour-tester-lexemple-dextension">Procedez comme suit pour tester l'exemple d'extension :</h1> <ol> <li>Redemarrez Dreamweaver. </li> <li>Sélectionnez Commandes > EditableSelectTest.</li> </ol> <p>Lorsque vous sélectionné une valeur dans la liste, un message d'advertissement affiche l'index de la valeur et le texte. Si vous entrez une valeur, un message d'advertissement indique qu'aucun élément n'est sélectionné.</p> <h1 id="commandes-de-base-de-données">Commandes de base de données</h1> <p>Dreamweaver you permit d'étendre la balise HTML select afin de creator une commande d'arborescence de base de données. Vous pouvez également ajouter une commande de grille de variables. La commande d'arborescence de base de données affiche le schéma des bases de données et la commande de grille de variables affiche les informations tabulaires.</p> <p>La figure suivante présente une boîte de dialogue Jeu d'enregistements avancée utilisant une commande d'arborescence de base de données et une commande de grille de variables :</p> <p><img alt="" src="images/3eff4337f1e44a409f0a00f2ce9119b8a298f89d1e1f77d63713ca642a3d8fc4.jpg" /></p> <h1 id="ajout-dune-commande-darborescence-de-base-de-données">Ajout d'une commande d'arborescence de base de données</h1> <p>La commande d'arborescence de base de données possède les attributs suivants :</p> <table><tr><td>Nom d'attribut</td><td>Description</td></tr><tr><td>name</td><td>Nom de la commande d'arborescence de base de donnéesées</td></tr><tr><td>control.style</td><td>Largeur et hauteur mesurées en pixels.</td></tr><tr><td>type</td><td>Type de commande.</td></tr><tr><td>connection</td><td>Nom de la connexion à la base de donnéesés définie dans le Gestionnaire de connexions ; si aucun nom n'est spécifique, la commande est vide.</td></tr><tr><td>noexpandbuttons</td><td>Lorsque cet attribut est spécifique, la commande d'arborescence ne dessine ni les indicateurs de développement (plus, +) ou de réduction (moins, -), ni les flèches correspondantes sur un ordinateur Macintosh. Cet attribut est très utile pour dessiner des commandes de liste à plusieurs colonnes.</td></tr><tr><td>showheaders</td><td>Lorsque cet attribut est défini, la commande d'arborescence affiche un en-tête en haut, recensant le nom de chaque colonne.</td></tr></table> <p>Toutes les balises d'options placées dans la balise select sont ignores.</p> <p>Pour ajouter une commande d'arborescence à une boîte de dialogue, vous pouvez utiliser l'échantillon de code suivant en effetuant les substitutions appropriées pour les variables citées :</p> <pre><code class="language-xml"><select name="DBTree" style="width:400px;height:110px" type="mmdatabase树" connection="connectionName" noexpandbuttons showHeaders></select> </code></pre> <p>La modification de l'attribut connection vous permet de récapérer les données sélectionnées et de les afficher dans l'arborescence. Utilisez l'attribut DBTreeControl comme objet JavaScript d'enveloppement de la nouvelle balise. Pour obtenir d'autres exemples, consultez le fichier DBTreeControlClass.js du dossier Configuration/Shared/Common/Scripts.</p> <h1 id="ajout-dune-commande-de-grille-de-variables">Ajout d'une commande de grille de variables</h1> <p>La commande de grille de variables possée les attributs suivants :</p> <table><tr><td>Nom d'attribut</td><td>Description</td></tr><tr><td>name</td><td>Nom de la commande de grille de variables.</td></tr><tr><td>style</td><td>Largeur de la colonne, exprimée en pixels.</td></tr><tr><td>type</td><td>Type de commande.</td></tr><tr><td>columns</td><td>Chaque colonne doit dispose r'un nom, séparée par une virgule.</td></tr><tr><td>columnWidth</td><td>Largeur de chaque colonne, séparée par une virgule. Les colonnes sont de largeur égale si aucune largeur n'est spécifiée.</td></tr></table> <p>L'exemple suivant ajoute une commande de grille de variables à une boîte de dialogue :</p> <p><select name="ParamList" style="width:515px;" type="mmparameterlist columns" = "Name,SQL Data Type,Direction,Default Value,Run-time Value" size = 6> </select></p> <p>L'exemple suivant create une commande de grille de variables de 500 pixels de large et compteant cinq colonnes de largeur variable :</p> <p><select name = "ParamList" style = "width:800px;" type = "mmparameterlist" columns = "Name,SQL Data Type,Direction,Default Value,Run-time Value" columnWidth = "100,25,11," size 6></p> <p>Cet exemple creé deux colonnes vierges de 182 pixels de large chacune. Le calcul est le suivant : le total des colonnes définies est de 136. La largeur totale de la commande de grille de variables est de 500. L'espace restant une fois les trois premières colonnes insérées est 364. Il reste deux colonnes à insérer : 364 divisé par 2 est égal à 182.</p> <p>Cette commande de grille de variables comporte également un objet d'enveloppement JavaScript devant être employé pour acceder aux données de la commande et les manipuler. L'implémentation de cet objet se trouve dans le fichier GridControlClass.js du dossier Configuration\Shared\MM\Scripts\Class.</p> <h1 id="ajout-de-commandes-darborescence">Ajout de commandes d'arborescence</h1> <p>La commande d'arborescence affiche les données dans un format hierarchisé et permet aux utilisateurs d'étendre et de réduire les nœuds de l'arborescence. La balise MM: TREECONTROL permit de créé des commandes d'arborescence pour tout type d'informations ; à la différence de la commande d'arborescence de base de données décrite à la section Ajout d'une commande d'arborescence de base de données, page 123, aucune association à une base de données n'est requisite. Dans Dreamweaver, l'Editeur de raccourcis clavier utilise la commande d'arborescence comme représenté dans la figure suivante :</p> <p><img alt="" src="images/5183a6fe84d19b6d7346fd08f33181d54cc2f913ee5f2e419f322aaba926b484.jpg" /></p> <h1 id="création-dune-commande-darborescence">Création d'une commande d'arborescence</h1> <p>La balise MM: TREECONTROL create une commande d'arborescence et peut utiliser d'autres balises afin de compléter la structure, comme indiqué dans la liste suivante :</p> <p>MM: TREECOLUMN est une balise facultative vide qui définit une colonne dans la commande d'arborescence. <br /> MM: TREENODE est une balise facultative qui définit un nœud dans l'arborescence. Il s'agit d'une balise nonempty qui ne peut contir que d'autres balises MM: TREENODE.</p> <p>Les attributs des balises MM: TREECONTROL sont les suivants :</p> <table><tr><td>Nom d'attribut</td><td>Description</td></tr><tr><td>name</td><td>Nom de la commande d'arborescence.</td></tr><tr><td>size</td><td>Facultatif. Nombre de lignes visibles dans la commande; la valeur par défaut est de 5 lignes.</td></tr><tr><td>theControl</td><td>Facultatif. Si le nombre de nœuds de l'attribut theControl est supérieur à la valeur de l'attribut size, des barres de défilament s'affichent.</td></tr><tr><td>multiple</td><td>Facultatif. Autorise plusieurs sélections; la valeur par défaut est une sélection unique.</td></tr><tr><td>style</td><td>Facultatif. Définition de style pour la hauteur et la largeur de la commande d'arborescence; si cet attribut est précisé, il est prépondérant sur l'attribut size.</td></tr><tr><td>noheaders</td><td>Facultatif. Indique que les en-têtes de la colonne doivent être masqués.</td></tr></table> <p>Les attributs des balises MM: TREECOLUMN sont les suivants :</p> <table><tr><td>Nom d'attribut</td><td>Description</td></tr><tr><td>name</td><td>Nom de la colonne.</td></tr><tr><td>value</td><td>Chaîne qui doit s'afficher dans l'en-tête de la colonne.</td></tr><tr><td>width</td><td>Largeur de la colonne exprimée en pixels (les pourcentages ne sont pas pris en charge) ; la valeur par défaut est 100.</td></tr><tr><td>align</td><td>Facultatif. Indique l'alignement du texte de la colonne : à gauche, à droite ou centré ; la valeur par défaut est à gauche.</td></tr><tr><td>state</td><td>Indique si la colonne est visible ou masquée.</td></tr></table> <p>Pour une meilleure visibilité, les balises TREECOLUMN doivent suivre immédiatement la balise</p> <p>MM:TreeControl, comme indiquédans l'exemple suivant :</p> <pre><code class="language-xml"><MM:TREECONTROL name="tree1"> <MM:TREECOLUMN name="Column1" width="100" state="visible"> <MM:TREECOLUMN name="Column2" width="80" state="visible"> </MM:TREECONTROL> </code></pre> <p>Les attributs MM: TREENODE sont décrites dans le tableau suivant :</p> <table><tr><td>Nom d'attribut</td><td>Description</td></tr><tr><td>name</td><td>Nom du nœud.</td></tr><tr><td>value</td><td>Comporte le contentu du nœud donné. Pour plusieurs colonnes, il s'agit d'une châine délimiterée par un trait vertical. Pour définir une colonne vide, placez un seul caractère d'espace avant le trait vertical (I).</td></tr><tr><td>state</td><td>Spécifie que le nœud est développé ou réduit avec les chaînes expounded ou collapsed.</td></tr><tr><td>selected</td><td>Vou陏cesseLECTIONner plusieurs nœuds en définissant cet attribut sur plusieurs nœuds d'arborescence, si cette dernière compte un attribut MULTIPLE.</td></tr><tr><td>icon</td><td>Facultatif. Index de l'icône intégrée à utiliser, en commençant par O : 0 = aucune icône ; 1 = icône de document DW ; 2 = icône multi-document</td></tr></table> <p>Par exemple, tous les nœuds de la commande d'arborescence suivante sont développés :</p> <pre><code class="language-txt"><mm:treecontrol name="test" style="height:300px;width:300px"> </code></pre> <pre><code class="language-asp"><mm:treenode value="rootnode" state="expanded"> <mm:treenode value="node1" state="expanded"></mm:treenode> <mm:treenode value="node3" state="expanded"></mm:treenode> </mm:treenode> </code></pre> <pre><code class="language-xml"><mm:treenode value="rootnode2" state="expanded"> <mm:treenode value="node2" state="expanded"><mm:treenode> <mm:treenode value="node4" state="expanded"><mm:treenode> </mm:treenode> </code></pre> <pre><code class="language-twig"></mm:treecontrol> </code></pre> <h1 id="manipulation-du-contenu-dune-commande-darborescence">Manipulation du contenu d'une commande d'arborescence</h1> <p>Les commandes et les nœuds d'arborescence sous-jacents sont implémentés comme des balises HTML. Ils sont par conséquent analysés par Dreamweaver et stockés dans l'arborescence du document. Ces balises peuvent ensuite être manipulées comme tout autre nœud de document. Pour plus d'informations sur les fonctions et les méthodes DOM, voir Chapitre 5, "Modèle d'objet de document (DOM) Dreamweaver," on page 133.</p> <p>Ajout de nœuds Pour programmer l'ajout d'un nœud à une commande d'arborescence existante, définièsez la propriété innerHTML de la balise MM: TREECONTROL ou de l'une des balises MM: TREENODE existantes. La définition de la balise inner HTML d'un nœud d'arborescence creé un nœud imbriqué.</p> <p>L'exemple suivant ajoute un nœud tout en haut de l'arborescence :</p> <pre><code class="language-javascript">var tree = document.myTreeControl; //add a top-level node to the bottom of the tree tree(innerHTML = tree(innerHTML + `<mm:treenode name="node3"value="node3">'); </code></pre> <p>Ajout d'un nœud de niveau supérieur Pour ajouter un nœud enfant à un nœud parent sélectionné, définissez la propriété innerHTML du nœud sélectionné.</p> <p>L'exemple suivant ajoute un nœud enfant à un nœud parent sélectionné :</p> <pre><code class="language-javascript">var tree = document.myTreeControl; var selNode = tree.selectedNodes[0]; //deselect the node, so we can select the new one selnode.removeAttribute("selected"); //add the new node to the top of the selected node's children selNodeinnerHTML = "<mm:treenode name="item10" value="New item11" expanded selected>' + selNodeinnerHTML; </code></pre> <p>Suppression de nœuds Pour supprimer le nœud séLECTIONné de la structure du document, utilisez la propriété innerHTML ou outerHTML.</p> <p>L'exemple suivant supprime le nœud parent sélectionné entier ainsi que ses nœuds enfants :</p> <pre><code class="language-javascript">var tree = document.myTreeControl; var selNode = tree.selectNodes[0]; selNode而出erHTML = "" </code></pre> <h1 id="commande-de-bouton-couleur-pour-les-extensions">Commande de bouton couleur pour les extensions</h1> <p>Outre les types d'entrées standard tels que le texte, la case à cocher et le bouton, Dreamweaver prend en charge mmcolorbutton, un autre type d'entrées présente dans les extensions.</p> <p>Si vous spécifiez <input type="mmcolorbutton"> dans votre code, un sélection de couleurs s'affiche dans l'interface utiliser. Vous pouvez définir la couleur par défaut du sélection en définissant un attribut de valeur dans la balise d'entrée. Si aucune valeur n'est spécifiée, le sélection de couleurs s'affiche par défaut en gris, et la propriété value de l'objet d'entrée renvoie une chaine vide.</p> <p>L'exemple suivant représenté une balise mmcolorbutton valide :</p> <pre><code class="language-html"><input type="mmcolorbutton" name="colorbutton" value="#FF0000"> <input type="mmcolorbutton" name="colorbutton" value="teal"> </code></pre> <p>Un bouton couleur comporte un événement, onChange, qui est déclenché lorsque la couleur est modifiée.</p> <p>Il peut se révérer judicieux de synchroniser une zone de texte avec un sélection de couleurs. Les exemples suivants créé une zone de texte qui synchronise la catégorie de la zone de texte avec celle du sélection de couleurs :</p> <p><input type = "mmcolorbutton" name "fgcolorPicker" onChange "document.fgcolorText.value this.value"> <input type = "test" name "fgcolorText" onBlur "document.fgColorPicker.value this.value"></p> <p>Dans cet exemple, si l'utilisateur modifie la valeur de la zone de texte, puis se déplace par tabulation ou clique ailleurs, le sélectionur de couleurs adopte la valeur spécifique dans la zone de texte. Lorsque l'utilisateur selectionne une nouvelle valeur dans le sélectionur, la zone de texte affiche la valeur hexadécimale de cette valeur.</p> <h1 id="ajout-de-contenu-flash-à-dreamweaver">Ajout de contenu Flash à Dreamweaver</h1> <p>Le contenu Flash (fichiers SWF) peut s'afficher dans l'interface de Dreamweaver comme partie d'un objet ou d'une commande. Cette prise en charge de Flash est très utile si vous créez des extensions qui emploient des formulaires, animations, ActionScript ou autre contenu Flash.</p> <p>Pour résumer, vous permette aux objets et commandes Dreamweaver d'afficher des boîtes de dialogue (voir Chapitre 6, "Objects de la barre Insérer," on page 147 pour plus d'informations sur la création d'objets et Chapitre 7, "Commandes," on page 177 pour plus d'informations sur les commandes) à l'aide de la balise form avec la balise object pour incorporer votre contenu Flash dans une boîte de dialogue Dreamweaver.</p> <h1 id="exemple-dune-boîte-de-dialogue-flash-simple">Exemple d'une boîte de dialogue Flash simple</h1> <p>Dans cet exemple, vous utilisez Dreamweaver pour creer une nouvelle commande qui affiche un fjchier SWF nomme myFlash.swf lorsque l'utilisateur clique sur cette commande dans le menu Commandes. Pour plus d'informations sur la creation de commandes avant d'essayer cet exemple, voir les informations liées aux commandes dans Extension de Dreamweaver.</p> <p>Cet exemple suppose qu'un fichier SWF nommé myFlash.swf se trouve déjà dans le dossier Configuration/Commands du dossier d'installation de l'application Dreamweaver. Pour tester cet exemple avec votre propre fichier SWF, enregistrez ce fichier SWF dans le dossier Commands de l'application et remplacez toutes les occurrences de myFlash.swf par le nom de votre fichier.</p> <p>Dans Dreamweaver, ouvre un nouveau document HTML de base (ce document constitue sauf la commande). Entre les balises title d'ouverture et de fermeture, entrez My Flash Movie afin que le début de votre page indique :</p> <pre><code class="language-html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My Flash Movie</title> <meta http-equiv="Content-Type" content="text/html; charset iso-8859-1"> </head> </code></pre> <p>Maintenant, enregistrez le fjichier sous le nom My Flash Movie.htm dans le dossier</p> <p>Configuration/Commands de l'application (le fichier doit néanmoins rester ouvert). Le fichier doit être enregistré à ce point de la procédure afin que le contenu Flash puisse être incorpore avec un lien relatif. Dans le cas contraire, Dreamweaver tente d'utiliser un chemin absolu.</p> <p>Revenez au document HTML. Entre les balises body d'ouverture et de fermeture, ajoute des balises form d'ouverture et de fermeture. Ensuite, entre ces balises form, utilisez l'option de menu Insertion > Medias > Flash pour ajouter votre contenu Flash au fichier de définition de commande. Lorsque vous y'este invite, selectionnez le fichier SWF dans le dossier</p> <p>Commands, puis cliquez sur OK. Notre fichier de definition de commande doit maintainant etresemblablea l'exemple suivant (bien entendu, les attributs width et height peuvent etre differentes, selon les propriétés de votre fichier SWF):</p> <pre><code class="language-html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My Flash Movie</title> <meta http-equiv="Content-Type" content="text/html; charset iso-8859-1"> </head> <body> <body> <form> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="100"> <param name="movie" value="myFlash.swf"> <param name="quality" value="high"> <embed src="myFlash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="100"></embed> </object> </form> </body> </html> </code></pre> <p>Enregistrez à nouveau le fjichier. Ensuite, quitterz et redémarrez Dreamweaver. Sélectionnez l'option de menu Commandes > My Flash Movie et votre contenu Flash s'affiche dans une boîte de dialogue Dreamweaver, comme indiqué dans la figure suivante :</p> <p><img alt="" src="images/552c0b718589a1a14881eae903f7605d4c3232b6a7793b58231eac12c7f6bffa.jpg" /></p> <p>Cet exemple illustré une mise en œuvre simple de la prise en charge de contenu Flash par Dreamweaver. Lorsque vous serez familiarisé avec la création d'objets et de commandes, ou encore de formulaires plus compliqués, vous pourrez intégrer du contenu Flash dans vos extensions Dreamweaver pour une expérience utilisateur encore plus dynamique. Pour plus d'informations, voir Chapitre 7, "Commandes," on page 177 sur l'écriture d'une fonction commandButtons() permettant d'ajouter des boutons à la boîte de dialogue affichtant votre contenu Flash.</p> <h1 id="modèle-dobjet-de-document-dom-dreamweaver">Modèle d'objet de document (DOM) Dreamweaver</h1> <p>Dans Macromedia Dreamweaver 8, le modèle d'objet de document (DOM) est une structure essentielle pour les créateurs d'extensions. Il permet l'accès à divers éléments et la manipulation de ces derniers dans le document d'un utiliser et dans le fjichier d'extension. Un DOM définit la composition des documents créés dans un langage de balisage. En représentant les balises et attributs sous forme sous forme d'objets et de propriétés, le DOM rend les documents et leurs composants accessibles et exploitables par les langages de programmation.</p> <p>La structure d'un document HTML est réélevée par son arborescence. La racine est la balise HTML et les deux parties principales sont les balises HEAD et BODY. Parmi les ramifications de HEAD figurent les balises TITLE, STYLE, SCRIPT, ISINDEX, BASE, META et LINK. Les ramifications de BODY comprennent les titres (H1, H2, etc.), les éléments de niveau bloc (P, DIV, FORM, etc.), les éléments de niveau texte (FONT, BR, IMG, etc.), ainsi que d'autres types d' éléments. Les éléments émergent de ces ramifications correspondant, entre autres, à des attributs tels que WIDTH, HEIGHT, ALT, etc.</p> <p>Dans un DOM, la structure de l'arborescence est maintainue et presentee sous la forme d'une hierarchie de nœuds parents et de nœuds enfants. Le nœud racine est orphelin, et les nœuds terminaux sont dépourvus de nœuds enfants. A chaque niveau de cette structure HTML, l'objet HTML peut revêrir la forme d'un nœud dans JavaScript. Cette structure vous permet ainsi d'acceder au document et à tous les éléments qui le component.</p> <p>Dans JavaScript, vous pouvez reférer un objet de document par son nom ou par son index, comme déscrit dans la liste suivante :</p> <p>Par nom, comme document.myForm.myButton <br /> - Par index, comme document.forms[0].elements[1]</p> <p>Les objets ayant le même nom forment un tableau. Vous pouvez acceder à un objet particulier d'un tableau en incrémentant l'index de zéro comme origine (par exemple, le premier bouton radio intitulé myRadioGroup dans le document myForm serait référencé par document.myForm.myRadioGroup[0]).</p> <h1 id="dequeldomdedocument-parlons-nous">DequelDOMdedocument parlons- nous?</h1> <p>Il convient de faire la différence entre le DOM du document de l'utilisateur et le DOM de l'extension. Les informations presentées dans ce chapitre s'appliquent aux deux types de documents Dreamweaver, mais la manière de réféencer chacun des DOM diffé.</p> <p>Si vous étés familier avec l'utilisation de JavaScript dans les navigateurs, vous pouvez désigner les objets du document par document. Par exemple, document.forms[0], de la même manière que vous référenciez les objets dans les fichiers d'extension. Pour référencer les objets dans le document de l'utilisateur, vous doivent toutefois appeler dw.getDocumentDOM(), dw.createDocument() ou toute autre fonction qui renvoie un objet de document utiliser.</p> <p>Ainsi, pour désigner la première image du document actif, vous pouze écrire dw.getDocumentDOM().images[0]. Vous pouze également stocker l'objet de document dans une variable et vous y reférer ultérieurement, comme indiqué dans l'exemple suivant :</p> <p>var dom = dw.getDocumentDOM(); //get the dom of the current document<br /> var firstImg = dom/images[0];<br /> firstImg.src = "myImages.gif";</p> <p>Ce type d'annotation est commun dans tous les fichiers du dossier Configuration, particulièrement dans les fichiers de commandes. Pour plus d'informations sur la méthode dw.getDocumentDOM(), voir la fonction dreamweaver.getDocumentDOM() dans le Guide des API de Dreamweaver.</p> <h1 id="dom-dreamweaver">DOM Dreamweaver</h1> <p>Le DOM Dreamweaver associe un sous-ensemble d'objects, de propriétés et de méthodes du DOM Niveau 1 du World Wide Web Consortium (W3C) (http://www.w3.org/TR/RECDOM-Level-1/), combinés à certaines propriétés du DOM de Microsoft Internet Explorer 4.0.</p> <h1 id="objets-propriétés-et-méthodes-du-dom-dreamweaver">**Objets, propriétés et méthodes du DOM** Dreamweaver</h1> <p>Le tableau suivant répertorie les objets, les propriétés, les méthodes et les événements pris en charge par le DOM Dreamweaver. Certaines propriétés sont en lecture seule lorsqu'elles sont accessibles en tant que propriétés d'un object spécifique. Les propriétés en lecture seule, lorsqu'elles sont utilisées dans le contexte recensé, sont marquées d'une puce (●).</p> <table><tr><td>Objet</td><td>Propriétés</td><td>Méthodes</td><td>Événements</td></tr><tr><td>window</td><td>navigator ·document ·innerWidth ·innerHeight ·screenX ·screenY ·</td><td>alert()confirm()escape()unescape()close()setTimeout()clearTimeout()setInterval()clearInterval()resizeTo()</td><td>onResize</td></tr><tr><td>navigator</td><td>platform ·</td><td>None</td><td>None</td></tr><tr><td>document</td><td>forms · (tableau d'objets de formulaire)images · (tableau d'objets image)layers · (tableau d'objets LAYER, ILAYER et d'objets DIV et SPAN à positionnement absolu)Objects child par nom ·nodeType ·parentNode · childrenNodes ·documentElement ·body ·URL · parentWindow ·</td><td>getElementsBy TagName()hasChildNodes()</td><td>onLoad</td></tr><tr><td>all tags/elements</td><td>nodeType ·parentNode · childrenNodes · tagName ·attributes by nameinnerHTMLouterHTML</td><td>getAttribute()setAttribute()removeAttribute()getElementsByTagName()hasChildNodes()</td><td></td></tr><tr><td>form</td><td>En complément des propriétés disponibles pour toutes les balises : tags:elements · (tableau d'objects button, checkbox, password, radio, reset, select, submit, text, file, hidden, image et textarea ) mmcolorbutton objs child par nom ·</td><td>Uniquement les méthodes disponibles pour toutes les balises.</td><td>Aucun</td></tr><tr><td>layer</td><td>En complément des propriétés disponibles pour toutes les balises : visibility left top width height zIndex</td><td>Uniquement les méthodes disponibles pour toutes les balises.</td><td>Aucun</td></tr><tr><td>image</td><td>En complément des propriétés disponibles pour toutes les balises : src</td><td>Uniquement les méthodes disponibles pour toutes les balises.</td><td>onMouseOver onMouseOut onMouseDown onMouseUp</td></tr><tr><td>button reset submit</td><td>En complément des propriétés disponibles pour toutes les balises : form ·</td><td>En complément des méthodes disponibles pour toutes les balises : blur() focus()</td><td>onClick</td></tr><tr><td>checkbox radio</td><td>En complément des propriétés disponibles pour toutes les balises : checked form ·</td><td>En complément des méthodes disponibles pour toutes les balises : blur() focus()</td><td>onClick</td></tr><tr><td>password text file hidden image (field) textarea</td><td>En complément des propriétés disponibles pour toutes les balises : form · value</td><td>En complément des méthodes disponibles pour toutes les balises : blur() focus() select()</td><td>onBlur onFocus</td></tr><tr><td>select</td><td>En complément des propriétés disponibles pour toutes les balises : form · options · (an array of option objects) selectedIndex</td><td>En complément des méthodes disponibles pour toutes les balises : blur() (Windows uniquely) focus() (Windows uniquely)</td><td>onBlur (Windows unique) onChange onFocus (Windows unique)</td></tr><tr><td>option</td><td>En complément des propriétés disponibles pour toutes les balises : text</td><td>Uniquement les méthodes disponibles pour toutes les balises.</td><td>Aucun</td></tr><tr><td>mmcolorbutton</td><td>En complément des propriétés disponibles pour toutes les balises : name value</td><td>Aucun</td><td>onChange</td></tr><tr><td>array boolean date function math number object string regexp</td><td>Correspond à Netscape Navigator 4.0</td><td>Correspond à Netscape Navigator 4.0</td><td>Aucun</td></tr><tr><td>text</td><td>nodeType · parentNode · childNodes · data</td><td>hasChildNodes()</td><td>Aucun</td></tr><tr><td>comment</td><td>nodeType · parentNode · childNodes · data</td><td>hasChildNodes()</td><td>Aucun</td></tr><tr><td>NodeList</td><td>length ·</td><td>item()</td><td>Aucun</td></tr><tr><td>NamedNodeMap</td><td>length ·</td><td>item()</td><td>Aucun</td></tr></table> <h1 id="propriétés-et-méthodes-de-lobjet-document">Propriétés et méthodes de l'objet document</h1> <p>Le tableau suivant décrit en détaill les propriétés et les méthodes de l'objet document empruntées au DOM Niveau 1 et employées dans Dreamweaver. Les propriétés en lecture seule sont marquées d'une puce () .</p> <table><tr><td>Propriété ou méthode</td><td>Valeur renvoyée</td></tr><tr><td>nodeType ·</td><td>Node.DOCUMENT_NODE</td></tr><tr><td>parentNode ·</td><td>null</td></tr><tr><td>parentWindow ·</td><td>L'objet JavaScript correspond à la fenêtre parente du document ( cette propriété n'est pas incluse dans le DOM Niveau 1 ; elle est toutfois prise en charge par Microsoft Internet Explorer 4.0).</td></tr><tr><td>childNodes ·</td><td>Une NodeList (liste de noèuds) comprend tous les enfants immédiats de l'objet document. En règle générale, le document comporte un seul enfant : l'objet HTML.</td></tr><tr><td>documentElement ·</td><td>L'objet JavaScript correspond à la balise HTML. Cette propriété est une forme courte permettant d'obtenir la valeur de document(childNodes et d'extraire la balise HTML de la NodeList.</td></tr><tr><td>body ·</td><td>L'objet JavaScript correspond à la balise BODY. Cette propriété est une forme courte permettant d'appeler document.documentElement(childNodes et d'extraire la balise BODY de la NodeList. Pour les documents de jeu de cadres, cette propriété renvoie le nœud correspondant au jeu de cadres situé le plus à l'extérieur.</td></tr><tr><td>URL ·</td><td>L'URL de type file:// du document ou, si le fichier n'a pas été enregistré, une chaîne vide.</td></tr><tr><td>getElementsByTagName (tagName)</td><td>Une NodeList pouvant être utilisée pour parcourir les balises de type tagName (par exemple, IMG, DIV, etc.). Si l'argument tag est LAYER, la fonction renvoie toutes les balises LAYER et ILAYER et toutes les balises DIV et SPAN à positionnement absolu. Si l'argument tag est INPUT, la fonction renvoie tous les éléments du formulaire (si un attribut de nom est spécifique pour un ou plusieurs objets tagName, il doit commencer par une dette conformément à la spécification HTML 4.01 ; à défaut, la longueur du tableau renvoyée par cette fonction sera incorrecte).</td></tr><tr><td>hasChildNodes()</td><td>true</td></tr></table> <h1 id="propriétés-et-méthodes-des-objets-de-balise-html">Propriétés et méthodes des objets de balise HTML</h1> <p>Chaque balise HTML est représentée par un objet JavaScript. Les balises sont organises selon une hierarchie en arborescence dans laquelle la balise x est parente de la balise y si y est entierement définie entre les balises de début et de fin de x (<x>le containu de x <y>le containu de y</y> plus le containu de x.</x>). Par conséquent, votre code doit être bien structuré.</p> <p>Le tableau ci-dessous répertorie les propriétés et les méthodes des objets de balise dans Dreamweaver, ainsi que leurs valeurs de return ou leurs explications. Les propriétés en lecture seule sont marquées d'une puce () .</p> <table><tr><td>Propriété ou méthode</td><td>Valeur renvoyée</td></tr><tr><td>nodeType ·</td><td>Node.ELEMENT_NODE</td></tr><tr><td>parentNode ·</td><td>Balisé parente. S'il s'agit de la balise HTML, l'objet document est renvoyé.</td></tr><tr><td>childNodes ·</td><td>Une NodeList (liste de nœuds) comprend tous les enfants immédiats de la balise.</td></tr><tr><td>tagName ·</td><td>Nom HTML de la balise, tel que IMG, A ou BLINK. Cette valeur est toujours renvoyée en majuscules.</td></tr><tr><td>attrName</td><td>Chaine de caractères contenant la valeur de l'attribut de balise spécifique. tag.attrName ne peut pas être utilisé si l'attribut attrName est un mot réservé dans le langage JavaScript (par exemple, class). Dans ce cas, utilisez getAttribute() et setAttribute().</td></tr><tr><td>innerHTML</td><td>Code source contenu entre la balise de début et la balise de fin. Par exemple, dans le code <p><b>Hello</b>, World!, </p>, p.innerHTML renvoie <b>Hello</b>, World!. Si vous écrirez dans cette propriété, l'arborescence DOM est immédiatement mise à jour de façon à reflérer la nouvelle structure du document (cette propriété n'est pas incluse dans le DOM Niveau 1, mais elle est prise en charge par Internet Explorer 4.0).</td></tr><tr><td>outerHTML</td><td>Code source de cette balise, y compris la balise elle-même. Pour l'exemple de code précédent, p.outerHTML renvoie <p><b>Hello</b>, World! </p>. Si vous écrirez dans cette propriété, l'arborescence DOM est immédiatement mise à jour de façon à reflérer la nouvelle structure du document (cette propriété n'est pas incluse dans le DOM Niveau 1, mais elle est prise en charge par Internet Explorer 4.0).</td></tr><tr><td>getAttribute(attrName)</td><td>Valeur de l'attribute spécifique, si celui-ci est spécifique explicitement;sinon, null.</td></tr><tr><td>getTranslatedAttribute(attrName)</td><td>Valeur traduite de l'attribute spécifique ou la même valeur que celle renvoyée par getAttribute() si la valeur de l'attribut n'est pas traduite (cette propriété n'est pas incluse dans le DOM Niveau 1; elle a été ajoutée à Dreamweaver 3 pour prendre en charge la traduction d's-attributs).</td></tr><tr><td>setAttribute(attrName, attrValue)</td><td>Ne revoie aucune valeur. Affecte la valeur spécifique à l'attribut défini : par exemple, img.setAttribute("src", "image/roses.gif").</td></tr><tr><td>removeAttribute(attrName)</td><td>Ne revoie aucune valeur. Supprime l'attribut défini et sa valeur du code HTML de la balise.</td></tr><tr><td>getElementsByName(name)(tagName)</td><td>Une NodeList pouvant être utilisée pour parcourir les balises enfants de type tagName (par exemple, IMG, DIV, etc.).Si l'argument tag est LAYER, la fonction renvoie toutes les balises LAYER et ILAYER et toutes les balises DIV et SPAN à positionnement absolu.Si l'argument tag est INPUT, la fonction renvoie tous les éléments du formulaire (si un attribut de nom est spécifique pour un ou plusieurs objets tagName, il doit commencer par une dette conformément à la spécification HTML 4.01 ; à défaut, la longueur du tableau renvoyée par cette fonction sera incorrecte).</td></tr><tr><td>hasChildNodes()</td><td>Valeur boolée indiquant si la balise a des enfants.</td></tr><tr><td>hasTranslatedAttributes()</td><td>Valeur boolée indiquant si la balise a des attributs traduits (cette propriété n'est pas incluse dans le DOM Niveau 1; elle a été ajoutée à Dreamweaver 3 pour prendre en charge la traduction d's-attributs).</td></tr></table> <h1 id="propriétés-et-méthodes-des-objets-texte">Propriétés et méthodes des objets texte</h1> <p>Chaque bloc de texte contigu dans un document HTML (par exemple, le texte compris à l'intérieur d'une balise P) est représenté par un objet JavaScript. Les objetsertext n'ont jamais d'enfants. Le tableau suivant décrit les propriétés et les méthodes d'objetstexte empruntées au DOM Niveau 1 et employées dans Dreamweaver. Les propriétés en lecture seule sont marquées d'une puce () .</p> <table><tr><td>Propriété ou méthode</td><td>Valeur renvoyée</td></tr><tr><td>nodeType ·</td><td>Node.TEXT_node</td></tr><tr><td>parentNode ·</td><td>Balisé parente</td></tr><tr><td>childNodes ·</td><td>Une NodeList vide</td></tr><tr><td>data</td><td>La chaîne de texte réelle. Les entités du texte sont représentées par des caractères uniques (par exemple, le texte Joseph & I est renvoyé sous la forme Joseph & I).</td></tr><tr><td>hasChildNodes()</td><td>false</td></tr></table> <h1 id="propriétés-et-méthodes-des-objets-de-commentaire">Propriétés et méthodes des objets de commentaire</h1> <p>Un objet JavaScript représenté chaque commentaire HTML. Le tableau suivant décrit en détaill les propriétés et les méthodes d'objets de commentaires empruntées au DOM Niveau 1 et employées dans Dreamweaver. Les propriétés en lecture seule sont marquées d'une puce () .</p> <table><tr><td>Propriété ou méthode</td><td>Valeur renvoyée</td></tr><tr><td>nodeType ·</td><td>Node.COMMENT_node</td></tr><tr><td>parentNode ·</td><td>Balisé parente</td></tr><tr><td>childNodes ·</td><td>Un tableau NodeList vide</td></tr><tr><td>data</td><td>Châne de texte comprise entre les marqueurs de commentaires (<!-- et -->)</td></tr><tr><td>hasChildNodes()</td><td>false</td></tr></table> <h1 id="objets-dreamweaver-et-site">Objets dreamweaver et site</h1> <p>Dreamweaver implémente les objets standard accessibles au moyen du DOM et ajoute deux objets personnalisés : dreamweaver et site. Ces objets personnalisés sont courament utilisés dans les API et pour la réduction d'extensions. Pour plus d'informations sur les méthodes des objets dreamweaver et site, voir le Guide des API de Dreamweaver.</p> <h1 id="propriétés-de-lobjet-dreamweaver">Propriétés de l'objet dreamweaver</h1> <p>L'objet dreamweaver possède deux propriétés en lecture seule, comme indiqué dans la liste suivante :</p> <p>La propriété appName prend la valeur Dreamweaver. <br /> - La propriété appVersion prend une valeur ayant le format "versionNumber.releaseNumber.buildNumber [languageCode] (platform)".</p> <p>Par exemple, la valeur de la propriété appVersion pour la version Windows suédoise de Dreamweaver 8 correspond à "8.0.XXX [se] (Win32)" ; pour la version Macintosh anglaise, cette valeur est "8.0.XXX [en] (MacPPC)".</p> <h1 id="remarquee-2">REMARQUEE</h1> <p>Vous trouvrez la version et le numero de compilation en selectionnant l'element de menu Aide > A propos de.</p> <p>Les propriétés appName et appVersion ont été implémentées dans Dreamweaver 3 et ne sont pas disponibles dans les versions antérieures de Dreamweaver. Si vous souhaitez vérifier que l'utilisateur de votre extension dispose de la version 3 ou ultérieure de Dreamweaver, vous pouvez contrôler l'existence de la propriété appVersion ou appName.</p> <p>Pour connaître la version spécifique de Dreamweaver, vérifie en premier lieu l'existence de appVersion. Ensuite, pour le nombre de version, procédez comme dans l'exemple suivant :</p> <pre><code class="language-javascript">if(dreamweaver.appVersion&& \~ dreamweaver.appVersion.index0f('3.01')!=-1){ // execute code </code></pre> <p>L'objet dreamweaver comprend une propriété appelée systemScript, qui vous permet de vérifier la langue du système d'exploitation de l'utilisateur. Elle vous sera utile pour inclure dans le code de votre extension des spécificités des systèmes d'exploitation localisés, comme indiqué dans l'exemple suivant :</p> <pre><code class="language-javascript">if (dreamweaver.systemScript && (dreamweaver.systemScript.indexOf('ja')!=-1){ </code></pre> <pre><code class="language-txt">SpecialCase } </code></pre> <p>La propriété systèmeScript renvoie les valeurs suivantes pour les systèmes d'exploitation localisés :</p> <table><tr><td>Langue</td><td>Valeur</td></tr><tr><td>Japonais</td><td>jaja</td></tr><tr><td>Coréen</td><td>koko</td></tr><tr><td>Chinois traditionnel</td><td>zh_twzh_tw</td></tr><tr><td>Chinois simplifié</td><td>zh_cnzh_cn</td></tr></table> <p>Les systèmes d'exploitation localisés dans les langues européennes rengoient la valeur en.</p> <h1 id="objet-site">Objet site</h1> <p>L'objet site n'a aucune propriété. Pour plus d'informations sur les méthodes de l'objet site, voir le Guide des API de Dreamweaver.</p> <h1 id="partie-3">PARTIE 3</h1> <h1 id="api-dextension-2">API d'extension</h1> <h1 id="3">3</h1> <p>Etudiez les fonctions que vous doivent rédigier lorsqu'elles creez des objets, barres d'outils, éditeurs de balises, panneaux flottants, comportements de serveurs, composants ou modèles de serveur.</p> <p>Chapitre 6: Objects de la barre Insérer 147 <br /> Chapitre 7:Commandes 177 <br /> Chapitre 8: Menu et commandes de menu 191 <br /> Chapitre 9: Barres d'outils 227 <br /> Chapitre 10: Rapports. 261 <br /> Chapitre 11: Bibliothèques et éditeurs de balises 273 <br /> Chapitre 12: Inspecteurs de propriétés 291 <br /> Chapitre 13: Panneaux flottants 301 <br /> Chapitre 14: Comportements 317 <br /> Chapitre 15: Comportements de serveur 335 <br /> Chapitre 16 : Sources de données 397 <br /> Chapitre 17: Formats de serveur. 417 <br /> Chapitre 18 : Composants. 425 <br /> Chapitre 19: Modèles de serveur 443 <br /> Chapitre 20: Traducteurs de données 453 <br /> Chapitre 21: Extensions C 477</p> <p>Dans Macromedia Dreamweaver, les objets insèrent des chaînes de code spécifique dans le document de l'utilisateur. Ils seront en règle générale dans la barre Insérer, dans le menu Insertion ou dans les deux à la fois. Les objets permettent à l'utilisateur d'ajouter un contenu (images, calques, tableaux, etc.) en cliquant sur des icones ou en selectionnant des options de menu. Vous peuvent ajouter des éléments à la barre Insérer pour permettre aux utilisateurs d'effectuer automatiquement certaines tâches répetitives, voir créé des boîtes de dialogue pour leur permettre de définir des attributs spécifique.</p> <p><img alt="" src="images/17fad7fe68d1a59dcd39bc5b74ff46896052280e62aef2629497267199c1efb9.jpg" /></p> <p>Les objets sont stockés dans le dossier Configuration/Objects du dossier de l'application Dreamweaver. Les sous-dossiers du dossier Objects sont regroupés en fonction de l'emplacement des objets dans la barre Insérer ; vous pouvez les ouvrir pour visualiser la construction des objets actuels. Par exemple, vous pouvez ouvrir le fjichier Configuration/Objects/Common/Hyperlink.htm pour afficher le code correspondant au bouton permettant d'insérer l'objet Hyperlien de la barre Insérer.</p> <p>Le tableau ci-dessous recense les fichiers utilisés pour creer un objet.</p> <table><tr><td>Chemin</td><td>Fichier</td><td>Description</td></tr><tr><td>Configuration/Objects/type_objet/</td><td>nom_objet.htm</td><td>Indique l'élement à insérer dans le document.</td></tr><tr><td>Configuration/Objects/type_objet/</td><td>nom_objet.js</td><td>Contient les fonctions à exécuter.</td></tr><tr><td>Configuration/Objects/type_objet/</td><td>nom_objet.gif</td><td>Contient l'image qui s'affiche sur la barre Insérer.</td></tr><tr><td>Configuration/Objects</td><td>insertbar.xml</td><td>Désigne les objets qui s'affichent sur la barre Insérer, ainsi que l'ordre d'affichage correspondant.</td></tr></table> <h1 id="fonctionnement-des-fichiers-dobjet">Fonctionnement des fichiers d'objet</h1> <p>Les objets se compose des éléments suivants :</p> <p>Le fichier HTML définitissant l'objet inséré dans le document.</p> <p>La section HEAD d'un fisquier d'objet contient des fonctions JavaScript (ou fait reférence à des fischiers JavaScript externes)traitant les entrées de formulaire de la section BODY et contrôlant le contenu ajouté dans le document de l'utilisateur. La section BODY d'un fisquier d'objet peut containir un formulaire HTML acceptant les paramètres de l'objet (le nombre de lignes et de colonnes à insérer dans un tableau, par exemple) et activer une boîte de dialogue permettant aux utilisateurs de saisir différents attributs.</p> <p>Les objets les plus simples contiennent uniquement le code HTML à insérer, sans les balises BODY et HEAD. Pour plus d'informations, voir la section Customizing Dreamweaver (Personnalisation de Dreamweaver) du centre de support Macromedia.</p> <p>L'image figurant dans la barre Insérer (18 x 18 pixels). <br /> - Additions au fichier insertbar.xml. Le fichier insertbar.xml définit l'endroit où apparait l'objet dans la barre Insérer.</p> <p>Lorsqu'un utilisateur selectionne un objet en cliquant sur une icone de la barre Inserer ou enCHOIsissant un element du menu Insertion, les événements suivants se produit :</p> <ol> <li>Dreamweaver appelle la fonction canInsertObject() pour déterminer s'il doit afficher une boîte de dialogue. </li> <li>La balise FORM est recherchéée dans le filchier d'objet. Si un formulaire a eté défini et que l'options Afficher la boîte de dialogue lors de l'insertion d'objets est activée dans la catégorie Général de la boîte de dialogue Preférances, Dreamweaver appelle la fonction windowDimensions(), si elle est définié, pour déterminer la taille de la boîte de dialogue dans laquelle doit s'afficher le formulaire. Si le filchier d'objet ne contient aucun formulaire, Dreamweaver n'affiche pas de boîte de dialogue et ignore l'étape 2. </li> <li>Si Dreamweaver affiche une boite de dialogue à l'objet 1, l'utilisateur saisit les paramétres de l'objet (teils que le nombre de lignes et de colonnes d'un tableau) dans les champs de texte de la boite de dialogue, puis clique sur OK. </li> <li>Dreamweaver appelle la fonction objectTag() et insère la valeur renvoyée correspondante dans le document après la selection en cours (elle-ci n'est pas replacee). </li> <li>Si Dreamweaver ne trouve pas la fonction objectTag(), il recherche une fonction insertObject() et l'applèle.</li> </ol> <h1 id="fichier-de-définition-de-la-barre-insérer">Fichier de définition de la barre Insérer</h1> <p>Le fichier Configuration/Objects/insertbar.xml définit les propriétés de la barre Insérer. Ce fichier XML contient la définition de chacun des objets, dans leur ordre d'apparition.</p> <p>La première fois qu'un utilisateur démarre Dreamweaver, la barre Insérer s'affiche horizontally au-dessus du document. Sa visibilité et sa position sont ensuite enregistrées dans le Registre.</p> <h1 id="hiéarchie-des-balises-du-fichier-insertbarxml">Hiéarchie des balises du fichier Insertbar.xml</h1> <p>L'exemple ci-dessous affiche le format et la hierarchie des balises imbriquées du fichier insertbar.xml :</p> <?xml version="1.0"?> <!DOCTYPE insertbarset SYSTEM "-//Macromedia//DWExtension insertbar 5.0"> <p><insertbar xmlns:MMString = "http://www.macromedia.com/schemes/data/string/"> <br /> <category id "DW_Insertbar/Common"MMString:name "insertbar/categorycommon" folder "Common"> <button id "DW_Hyperlink" image "Common\Hyperlink.png" MMString:name "insertbar/hyperlink" file "Common\Hyperlink.htm" /> <button id "DW_E-Mail Link.png" MMString:name "insertbar/email" file "Common\E-Mail Link.htm" /> <separator /> <br /> <menubutton id "DW_IImages"MMString:name "insertbar/images" image "Common\Image.png"> <button id "DW_Issue"image "Common\Image.png" MMString:name "insertbar/image" file "Common\Image.htm" /> <br /> </menubutton> <separator /> <button id "DWTAGChooser"MMString:name "insertbar/tagChooser" image "Common\TagChooser.gif" command "dw.showTagChooser())" codeOnly "TRUE"/> <br /> </category> <br /> </insertbar></p> <p>La fin du contentu des balises insertbar et category est indiquee par les balises de fermeture </insertbar> et</category>. En revanche, les balises button, checkbutton et separator ne sont associées a aucune balise de fermeture. La fin des attributes et du contentu des balises button, checkbutton et separator est indiquee par une barre oblique (/) inseree avant le crochet de fermeture.</p> <h1 id="balises-de-définition-de-la-barre-insérer">Balises de définition de la barre Insérer</h1> <p>Le fichier insertbar.xml contient les balises et les attributs suivants :</p> <h1 id="insertbar"><insertbar></h1> <h1 id="description-57">Description</h1> <p>Cette balise désigne le content du fichier de définition de la barre Insérer. La balise de fermeture /insertbar> indique la fin du content.</p> <h1 id="attributes-56">Attributes</h1> <p>Aucun.</p> <h1 id="example-61">Example</h1> <p><insertbar> <category id="DW_Insertbar_Common" folder="Common"> <button id="DW_Hyperlink" image = "Common\Hyperlink.gif" file = "Common\Hyperlink.htm"/> <br /> </insertbar></p> <h1 id="category"><category></h1> <h1 id="description-58">Description</h1> <p>Cette balise définit une catégorie de la barre Insérer (par exemple, Commun, Formulaires ou HTML). La balise de fermeture / category indique la fin du contenu.</p> <p>Par défaut, la barre Insérer regroupe différentes catégories (par exemple, Commun, Formulaires ou HTML). Dans les versions précédentes de Dreamweaver, la barre Insérer se composeait de différents ontlets. Les utilisateurs peuvent définir leurs préférences quant à l'organisation des objets de la barre Insérer (par catégorie ou par onglet). Si l'utilisateur désit l'organisation par onglet, la balise category définit chacun d'eux.</p> <h1 id="attributes-57">Attributes</h1> <p>id,{folder},{showIf}</p> <h1 id="example-62">Example</h1> <pre><code class="language-txt"><category id="DW INSERTbar_Common" folder="Common"> <button id="DW_Hyperlink" image="Common\Hyperlink.gif"> file="Common\Hyperlink.htm"/> </category> </code></pre> <h1 id="menubutton"><menubutton></h1> <h1 id="description-59">Description</h1> <p>Cette balise définit un menu dérouulant dans la barre Inséorer.</p> <h1 id="attributes-58">Attributes</h1> <pre><code class="language-txt">id,image,{showIf},{name},{folder} </code></pre> <h1 id="example-63">Example</h1> <pre><code class="language-xml"><menubutton id="DW/ImageMenu" name="Images" image="Common\imagenu.gif" folder="Images"> <button id="DW/Image" image="Common\Image.gif" enabled="" showIf="" file="Common\Image.htm" /> </menubutton> </code></pre> <h1 id="button"><button/></h1> <h1 id="description-60">Description</h1> <p>Cette balise définit un bouton de la barre Insérer permettant à l'utilisateur d'exécuter le code spécifique par les attributs command ou file.</p> <h1 id="attributes-59">Attributes</h1> <pre><code class="language-javascript">id, image, name, {canDrag}, {showIf}, {enabled}, {command}, {file}, {tag}, {codeOnly} </code></pre> <h1 id="example-64">Example</h1> <pre><code class="language-txt"><button id="DW_Object" image="Common\Object.gif" name="Object" enabled="true" showIf="" file="Common\Obect.htm" /> </code></pre> <h1 id="checkbutton"><checkbutton/></h1> <h1 id="description-61">Description</h1> <p>Ce type de bouton peut se voir attribuer l'etat activé ou désactivé. Lorsque vous cliquez dessus, ce bouton apparait en surbrillance comme étant enforcé. Lorsqu'il est désactivé, il s'affiche sous forme plate. Dreamweaver inclut les états suivants: au passage de la souris; enforcé; au passage de la souris si enforcé; désactivé si enforcé. La commande doit faire en sorte qu'un clic sur le bouton d'activation provoque un changement de son état.</p> <h1 id="attributes-60">Attributes</h1> <p>id, image, checked, {showIf}, {enabled}, {command}, {file}, {tag}, {name}, {codeOnly}</p> <h1 id="example-65">Example</h1> <p><checkbutton id="DW↗StandardView" name = "Standard View" image "Tools\Standard View.gif" checked "View_Standard" command "dw.getDocumentDOM().showLayoutView(false)" /></p> <h1 id="separator"><separator/></h1> <h1 id="description-62">Description</h1> <p>Cette balise affiche une ligne verticale sur la barre Insérer.</p> <h1 id="attributes-61">Attributes</h1> <p>{showIf}</p> <h1 id="example-66">Example</h1> <p><separator showIf="VIEW_CODE"/></p> <h1 id="attributes-des-balises-de-définition-de-la-barre-insérer">Attributes des balises de définition de la barre Insérer</h1> <p>La signification des attributs correspondant aux balises de définition de la barre Insérer est la suivante :</p> <h1 id="idunique-id">id="unique id"</h1> <h1 id="description-63">Description</h1> <p>L'attribut id correspond à l'identificateur des boutons affichés dans la barre Insérer. Chaque élément du fichier doit posseder un attribut id unique.</p> <h1 id="example-67">Example</h1> <p>id="DW_Anchor"</p> <h1 id="imageimage_path">image="image_path"</h1> <h1 id="description-64">Description</h1> <p>Cet attribut indique le chemin d'accès, par rapport au dossier Configuration de Dreamweaver, du fisquier de l'icone affichée dans la barre Insérer. Le format de cette icône doit figurer parmi les formats pris en charge par Dreamweaver, mais il s'agit en principe d'un fisquier au format GIF ou JPEG, d'une taille de 18 x 18 pixels.</p> <h1 id="example-68">Example</h1> <p>image="Common/table.gif"</p> <h1 id="candragboolean">canDrag="Boolean"</h1> <h1 id="description-65">Description</h1> <p>Cet attribut spécifique si l'utilisateur a la possibilité de faire glisser l'icone dans le code ou dans l'espace de travail pour insérer l'objet correspondant dans le document. Si vous ne spécifie pas cet attribut, la valeur par défaut est true.</p> <h1 id="example-69">Example</h1> <p>canDrag="false"</p> <h1 id="showlfenabler">showlf="enabler"</h1> <h1 id="description-66">Description</h1> <p>Cet attribut indique que ce bouton doit s'afficher dans la barre Insérer uniquement si la valeur de l'activateur Dreamweaver désigné est régée sur true. Si vous ne spécifie pas l'attribut showIf, le bouton s'affiche systématiquement. Les activateurs gérés sont _SERVERMODEL.asp, _SERVERMODEL.aspNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML (pour toutes les versions de Macromedia ColdFusion), _SERVERMODEL_CFML_UD4 (réservé à Dev version 4 de ColdFusion), _SERVERMODEL_PHP, _FILE_template, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES et _VIEW_STANDARD.</p> <p>Pour spécifique plusieurs activateurs, séparez-les par des virgules (chaque virgule signifie ET). Pour exclure des activateurs (NOT), utilisez un point d'exclamation (!).</p> <h1 id="example-70">Example</h1> <p>Si vous souhaitez qu'un bouton apparaisse uniquement en mode Code dans une page ASP, définitisse les activateurs comme suit :</p> <p>showIf="VIEW_CODE,_SERVERMODELASP"</p> <h1 id="enabledenabler">enabled="enabler"</h1> <h1 id="description-67">Description</h1> <p>Cet attribut indique que l'utilisateur peut acceder à l'objet si la valeur de activateur_DW est réalisée sur true. Si vous ne spécifie pas la fonction enabled, l'objet est systématiquement activé par défaut. Les activateurs possibles sont : _SERVERMODEL.asp, _SERVERMODEL.aspNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML (pour toutes les versions de ColdFusion), _SERVERMODEL_CFML_UD4 (applicable uniquement à UltraDev version 4 de ColdFusion), _SERVERMODEL_PHP, _FILE_template, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES et _VIEW_STANDARD.</p> <p>Pour specifier plusieurs activateurs, séparez-les par des virgules (chaque virgule signifie ET).</p> <p>Pour exclure des activateurs (NOT), utilisez un point d'exclamation (!).</p> <h1 id="example-71">Example</h1> <p>Pour que le bouton soit disponible en mode Code uniquement, indiquez :</p> <p>enabled = "VIEW_CODE"</p> <p>Le bouton s'affiche alors en grise dans les autres modes.</p> <h1 id="checkedenabler">checked="enabler"</h1> <h1 id="description-68">Description</h1> <p>L'attribut checked est obligatoire si vous insérez la balise checkbutton.</p> <p>L'élement est activé si la valeur de DW_activateur est définie sur true. Les activateurs</p> <p>possibles sont : _SERVERMODEL ASP , _SERVERMODEL ASPNET , _SERVERMODEL_JSP ,</p> <p>_SERVERMODEL_CFML (pour toutes les versions de ColdFusion), _SERVERMODEL_CFML_UD4</p> <p>(applicable uniquement à UltraDev version 4 de ColdFusion), _SERVERMODEL_PHP,</p> <p>_FILE_template, VIEW_CODE, VIEW_DESIGN, VIEW_LAYOUT,</p> <p>_VIEW_EXPANDED_TABLES et_VIEW_STANDARD.</p> <p>Pour specifier plusieurs activateurs, séparez-les par des virgules (chaque virgule signifie ET).</p> <p>Pour exclure des activateurs (NOT), utilisez un point d'exclamation (!).</p> <h1 id="example-72">Example</h1> <p>checked = "View Layout"</p> <h1 id="commandapi_function">command="API_function"</h1> <h1 id="description-69">Description</h1> <p>Au lieu d'indiquer à Dreamweaver de se référer à un fisier HTML significant le code à insérer, vous pouvez associier une commande à cette balise. Lorsque l'utilisateur clique sur le bouton auquel se rapporte cette balise, Dreamweaver effectue alors la commande spécifique.</p> <h1 id="example-73">Example</h1> <p>command="dw.showTagChooser()"</p> <h1 id="filechemin_fichier">file="chemin_fichier"</h1> <h1 id="description-70">Description</h1> <p>L'attribut file indique le chemin d'accès au fichier d'un objet par rapport au dossier Configuration de Dreamweaver. Dreamweaver extrait le libellé de l'info-bulle associée à l'icone de l'objet du titre du fichier d'objet, à moins que vous ne spécifiez l'attribut name.</p> <h1 id="example-74">Example</h1> <p>file="Templates/Editable.htm"</p> <h1 id="tageditor">tag="editor"</h1> <h1 id="description-71">Description</h1> <p>Cet attribut ordonne à Dreamweaver d'appeler un éditeur de balises. En mode Code, si l'attribut tag est défini et que l'utilisateur clique sur l'objet, Dreamweaver appelle la boîte de dialogue Balise. En mode Code, si vous spécifie les attributs tag et command, Dreamweaver appelle l'éditeur de balises. En mode Création, si codeOnly="TRUE" et que l'attribut file n'est pas spécifique, Dreamweaver MX appelle l'affichage à deux volets, place le focus dans la partie code et appelle l'éditeur de balises.</p> <h1 id="example-75">Example</h1> <p>tag = "form"</p> <h1 id="nametextarea_infobulle">name="textarea_infobulle"</h1> <h1 id="description-72">Description</h1> <p>L'attribut name définit l'info-bulle qui s'affiche lorsque le curseur de la souris pointe sur l'objet concerné. Si vous spécifiez un fisier d'objet sans spécifique l'attribut name, Dreamweaver utilise le nom du fisier comme info-bulle.</p> <h1 id="remarque-14">REMARQUE</h1> <p>Si vous ne spécifie pas l'attribute name, l'objet ne pourrait pas être regroupé dans la catégorie Favoris de l'interface de la barre Insérer.</p> <p>Certain objects de la barre Insérer utilisent une variante de l'attribut name comptant le préfixe MMString. Le préfixe MMString indique une chaine localisée ; ces valeurs sont décrites à la section Localisation d'une extension, page 114.</p> <h1 id="example-76">Example</h1> <p>name = "cfoutput"</p> <h1 id="modification-de-la-barre-insérer">Modification de la barre Insérer</h1> <p>Vou puez déplacer les objets d'une catégorie à une autre, renomer les différentes catégories et supprimer de manière définitive certains objets du panneau. Pour que vos modifications soient prises en compte et apparaisent dans la barre Insérer, vous devez redémarrer Dreamweaver ou recharger les extensions. Pour plus d'informations sur le rechargement des extensions, voir Rechargez les extensions., page 111.</p> <h1 id="pour-déplacer-ou-copier-un-objet-répertorié-dans-une-catégorie-de-la-barre-insérer-vers-une-autre-catégorie-ou-vers-un-emplacement-différent-de-la-même-catégorie">Pour déplacer ou copier un objet répertorié dans une catégorie de la barre Insérer vers une autre catégorie ou vers un emplacement différent de la même catégorie :</h1> <ol> <li>Enregistrez une copie de sauvegarde du fichier insertbar.xml (nommez-la par exemple insertbar.sauvegarde.xml). </li> <li>Ouvrez le fichier insertbar.xml d'origine. </li> <li>Recherche la balise button représentant l'objet à déplacer ou à copier. Par exemple, pour déplacer l'objet Image de son emplacement au sein de la catégorie Commun, recherche la balise button dont l'attribut id est "DW_Photor". </li> <li>Coupe ou copiez l'ensemble de la balise button. </li> <li> <p>Recherche la balise category représentant la catégorie dans laquelle vous souhaitez déplacer ou copier l'objet.</p> </li> <li> <p>Recherche l'emplacement de la catégorie dans lequel vous souhaitez faire apparaitre l'objet. </p> </li> <li>Collez la balise button. </li> <li>Enregistrez le fichier insertbar.xml. </li> <li>Rechargez les extensions.</li> </ol> <h1 id="pour-supprimer-un-objet-de-la-barre-insérer">Pour supprimer un objet de la barre Insérer :</h1> <ol> <li>Enregistrez une copie de sauvegarde du fichier insertbar.xml (nommez-la par exemple insertbar.sauvegarde.xml). </li> <li>Ouvrez le fichier insertbar.xml d'origine. </li> <li>Recherche la balise button représentant l'objet à supprimer. </li> <li>Supprimez l'intégralité de la balise button. </li> <li>Enregistrez le fichier insertbar.xml. </li> <li>Sur votre disque, retirez les fichiers HTML, GIF et JavaScript du dossier dans lequel ils se trouvent pour les placer dans un dossier non répertorié dans le fjichier insertbar.xml. Par exemple, vous pouvez creer un nouveau dossier nommé « Inutilisé » dans le dossier Configuration/Objects et y placer les fichiers de l'objet (si vous étés certain de pouvoir supprimer cet objet, vous pouvez supprimer les fichiers de manière définitive. Il peut néanmoins s'avérer utile de conserver une copie de sauvegarde de ces fichiers en vue de pouvoir les restaurer, le cas échéant). </li> <li>Rechargez les extensions.</li> </ol> <h1 id="pour-modifier-lordre-des-catégories-de-la-barre-insérer">Pour modifier l'ordre des catégories de la barre Insérer :</h1> <ol> <li>Enregistrez une copie de sauvegarde du fichier insertbar.xml (nommez-la par exemple insertbar.sauvegarde.xml). </li> <li>Ouvrez le fichier insertbar.xml d'origine. </li> <li>Recherche la balise category correspondant à la catégorie à déplacer, puis selectionnez-la ainsi que l'ensemble de son contenu. </li> <li>Coupe cette balise. </li> <li>Collez la balise dans son nouvel emplacement. Veiliez à ne pas coller la balise au sein d'une autre balise category. </li> <li>Enregistrez le fichier insertbar.xml. </li> <li>Rechargez les extensions.</li> </ol> <h1 id="pour-creer-une-categorie">Pour creer une categorie :</h1> <ol> <li>Enregistrez une copie de sauvegarde du fichier insertbar.xml (nommez-la par exemple « insertbar.sauvegarde.xml »). </li> <li>Ouvrez le fichier insertbar.xml d'origine. </li> <li>Créez une balise category et indique le dossier par défaut ainsi que l'ensemble des objets contenus dans cette catégorie. </li> <li>Pour plus d'informations sur la syntaxe des balises du fichier insertbar.xml, voir Balises de définition de la barre Insérer, page 150. </li> <li>Enregistrez le fichier insertbar.xml. </li> <li>Rechargez les extensions.</li> </ol> <h1 id="ajout-dobjects-à-la-barre-insérer">Ajout d'objects à la barre Insérer</h1> <p>Voussupportezajouteresobjetsa la barreInsere.Pourquevosmodificationssoientprisesen compte et apparaissent dansla barreInsere,vousdevezredemarrerDreamweaver ou rechargerles extensions.Pourplusd'informationssurle rechargementdes extensions,voir Rechargezles extensions.,page111.</p> <h1 id="pour-ajouter-un-nouvel-objet-à-la-barre-insérer-procédez-comme-suit">Pour ajouter un nouvel objet à la barre Insérer, procédez comme suit :</h1> <ol> <li>Définissez la chaine spécifique de code destinée au document de l'utilisateur par le biais de HTML et, en option, JavaScript. </li> <li>Identifiez ou creez l'image (18 x 18 pixels) correspondant au bouton à intégrer à l'interface de Dreamweaver.</li> </ol> <p>Si vous creez une image de taille supérieure, Dreamweaver la redimensionne pour lui attribuer une taille de 18 × 18 pixels. Si vous ne creez pas d'image pour un objet, une icone d'objet par défaut représentée par un point d'interrogation (?) apparait dans la barre Insérer.</p> <ol> <li>Ajoutez les nouveaux fichiers au dossier Configuration/Objects. </li> <li>Modifie le fisquier insertbar.xml pour indiquer l'emplacement des nouveaux fischiers et spécifie les attributs (voir Fichier de définition de la barre Insérer, page 149) définissant l'aspect du bouton. </li> <li>Redémarrez Dreamweaver ou rechargez les extensions.</li> </ol> <p>Le nouvel objet apparait dans la barre Insérer à l'emplacement indiqué.</p> <p>Mème si les fichiers d'objet peuvent être stockés dans des dossiers séparés, il est important que le nom de chaque fisquier soit unique. La fonction dom.insertObject(), par exemple, recherche les fichiers dans l'ensemble du dossier Objects sans tenir compte des sous-dossiers (pour plus d'informations sur la fonction dom.insertObject(), voir le Guide des API de Dreamweaver). Si le dossier Forms contient un fisquier nommé Button.htm et qu'un autre fisquier nommé Button.htm se trouve également dans le dossier MyObjects, Dreamweaver ne parvient pas à les différencier. S'il existe deux instances du fisquier Button.htm, dom.insertObject() affiche deux objets nommés Button; il estès lors difficile pour l'utilisateur de les différencier.</p> <h1 id="ajout-dobjects-au-menu-insertion">Ajout d'objects au menu Insertion</h1> <p>Pour ajouter ou contrôler la position d'un object du menu Insérer (ou de tout autre menu), modifiez le filchier menus.xml. Ce filchier contrôle l'intégrality de la structure de menus pour Dreamweaver. Pour plus d'informations sur la modification du filchier menus.xml, voir Chapitre 8, "Menu et commandes de menu," on page 191.</p> <p>Si vous souhaitez distribuer l'extension à d'autres utilisateurs de Dreamweaver, voir Utilisation de Extension Manager, page 116 pour en savoir plus sur le conditionnement des extensions.</p> <h1 id="exemple-simple-dinsertion-dun-objet">Exemple simple d'insertion d'un objet</h1> <p>Cet exemple ajoute à la barre Insérer un objet permettant aux utilisateurs de rayer d'une ligne (barrer) le texte sélectionné en cliquant sur un bouton. Cet objet s'utilise lors de l'insertion de commentaires concernant l'édition d'un document.</p> <p>Cet exemple implique des manipulations du texte ; vous pouvez par conséquent découvert certains des objets existants dans le menu déroulant Texte de la catégorie HTML de la barre Insérer et vous en servir comme d'un modèle. Par exemple, vous pouvezaminer les fichiers d'objet Bold, Emphasis et Heading pour observer des fonctionnalités similaires, dont le principe consiste à insérer une balise de part et d'autre du texte sélectionné dans Dreamweaver.</p> <p>La procEDURE de création de l'objet Strikethrough est la suivante :</p> <ul> <li>Création du fichier HTML <br /> Ajout de fonctions JavaScript </li> <li>Création de l'image <br /> Modification du fichier insertbar.xml <br /> Ajout d'une boite de dialogue</li> </ul> <h1 id="création-du-fichier-html">Création du fichier HTML</h1> <p>Le titre de l'objet est indiqué entre les balises title d'ouverture et de fermetre. Vous spécifie également le langage de script JavaScript.</p> <h1 id="pour-creer-le-fichier-html">Pour creer le fichier HTML :</h1> <ol> <li>Creez un document vierge. </li> <li>Ajoutez le code suivant:</li> </ol> <pre><code class="language-html"><html> <head> <title>Strikethrough</title> <script language="javascript"> </script> </head> <body> </body> </html> </code></pre> <ol> <li>Enregistrez le fichier sous le nom Strikethrough.htm dans le dossier Configuration/ Objects/Text.</li> </ol> <h1 id="ajout-de-fonctions-javascript">Ajout de fonctions JavaScript</h1> <p>Dans cet exemple, les fonctions JavaScript définissant le comportement de l'objet Strikethrough et insèrent le code correspondant. Vous doivent placer toutes les fonctions API dans la section HEAD du fisquier. Les fischers d'objet déjà créés, par exemple, Configuration/Objects/Text/Em.htm, sont basés sur le même modele de fonctions et de commentaires.</p> <p>La première fonction utilisée par le fichier de définition d'objet est la fonction isDOMRequired(), qui indique si le mode Création doit être synchronisé avec le mode Code existant avant de poursuivre l'exécution. Cependant, l'objet Superscript peut s'utiliser avec de nombreux autres objets en mode Code; une synchronisation imposée n'est donc pas nécessaire.</p> <h1 id="pour-ajouter-la-fonction-isdomrequired">Pour ajouter la fonction isDOMRequired():</h1> <ol> <li>Dans la section HEAD du fichier Strikethrough.htm, ajoutez la fonction ci-dessous entre les balises script d'ouverture et de fermeture :</li> </ol> <pre><code class="language-txt"><script language="javascript"> function isDOMRequired() { // Return false, indicating that this object is available in Code view. </code></pre> <pre><code class="language-txt">return false; } </script> </code></pre> <ol> <li>Enregistrez le fichier.</li> </ol> <p>Ensuite, indique si vous souhaitez utiliser la fonction objectTag() ou insertObject(). L'opération effectuee par l'objet Barre consiste simplement a insérer la balise s de part et d'autre du texte selectionné. Il ne remplit donc pas les conditions nécessaires à l'utilisation de la fonction insertObject() (voir insertObject(), page 172).</p> <p>Dans la fonction objectTag(), indique dw.getFocus() pour déterminer si le mode actuel correspond au mode Code. Si le mode Code est actif, la fonction insère la balise appropriée (majuscule ou minuscule) de part et d'autres du texte sélectionné. Si le mode Création est actif, la fonction utilise dom.applyCharacterMarkup() pour assigner le format du texte sélectionné. Notez que cette fonction s'utilise uniquement avec les balises prises en charge (pour plus d'informations, voir dom.applyCharacterMarkup() dans le Guide des API de Dreamweaver). Pour utiliser d'autres balises ou opérations, il sera peut-être nécessaire de faire appel à d'autres fonctions API. Une fois le format appliqué par Dreamweaver, le point d'insertion (curseur) réapparait dans le document, sans message ni invite préalable. La procédure ci-dessous illustré la forme de la fonction objectTag() une fois ces informations renseignées:</p> <h1 id="pour-ajouter-la-fonction-objecttag">Pour ajouter la fonction objectTag :</h1> <ol> <li>Dans la section HEAD du fichier Strikethrough.htm, ajoutez la fonction ci-dessous après la fonction isDOMRequired():</li> </ol> <p>function objectTag() { // Determine if the user is in Code view. var dom = dw.getDocumentDOM(); if (dw.getFocus() = = 'TextView' || dw.getFocus(true) = = 'html') { var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "") = = 'TRUE'); // Manually wrap tags around selection. if (upCaseTag){ dom.source unwrapSelection('<S>','</S>'); }else{ dom.source unwrapSelection('<s>','</s>'); } // If the user is not in Code view, apply the formatting in Design view. }else if (dw.getFocus() = = 'document') { dom.applyCharacterMarkup("s"); } // Just return--don't do anything else.</p> <pre><code class="language-txt">return; </code></pre> <ol> <li>Enregistrez le fichier sous le nom Strikethrough.htm dans le dossier Configuration/ Objects/Text.</li> </ol> <p>Au lieu d'inclure les fonctions JavaScript dans la section HEAD du fjichier HTML, vous pouvez创建工作 un fjichier JavaScript distinct. Cette organisation a part s'utilise notamment pour les objets contenant plusieurs fonctions ou des fonctions susceptibles d'être partagées par d'autres objets.</p> <h1 id="pour-séparer-le-fichier-de-définition-dobjet-html-des-fonctions-javascript-de-prise-en-charge">Pour séparer le fichier de définition d'objet HTML des fonctions JavaScript de prise en charge :</h1> <ol> <li>Creez un document vierge. </li> <li>Collez toutes les fonctions JavaScript dans le fjichier. </li> <li>Supprimez ces fonctions du fichier Strikethrough.htm, puis ajoutez le nom du fichier JavaScript à l'attribut src de la balise script, comme indiqué dans l'exemple suivant :</li> </ol> <pre><code class="language-html"><html> <head> <title>Strikethrough</title> <script language="javascript" src="Strikethrough.js"> </script> </head> <body> </body> </html> </code></pre> <ol> <li>Enregistrez le fichier Strikethrough.htm. </li> <li>Enregistrez le filchier qui contient à présent les fonctions JavaScript sous le nom Strikethrough.js dans le dossier Configuration/Objects/Text.</li> </ol> <h1 id="creation-de-limage">Creation de l'image</h1> <h1 id="pour-creer-limage-utilisée-dans-la-barre-inseder">Pour creer l'image utilisée dans la barre Inseder :</h1> <ol> <li>Créez une image GIF de 18 x 18 pixels, ainsi que l'indique la figure suivante :</li> </ol> <p><img alt="" src="images/460c406e35dad00cdcb80c967e3635ee0ab4ee1486695dc9479a294d8b92a0d0.jpg" /></p> <ol> <li>Enregistrez le fichier sous le nom Strikethrough.gif dans le dossier Configuration/Objects/Text.</li> </ol> <h1 id="modification-du-fichier-insertbarxml">Modification du fichier insertbar.xml</h1> <p>Voudevez àpresent modifier le fichier insertbar.xml file,afin que Dreamweaver puisse associerces deux éléments à l'interface de la barre Inséorer.</p> <p>Avant de modifier le fichier insertbar.xml file, vous pouvez l'enregistrer sous l'extension insertbar.xml.bak de manière à conserver une copie de sauvegarde.</p> <p>Le code contenu dans le fichier insertbar.xml désigne tous les objets figurant dans la barre Insérer.</p> <ul> <li>Chaque balise category du fichier XML cree une categorie dans l'interface. </li> <li>Chaque balise menubution cree un menu déroulant dans la barre Insérer. </li> <li>Chaque balise button du fichier XML affiche une icône dans la barre Insérer et la relié au fichier HTML ou à la fonction correspondants.</li> </ul> <h1 id="pour-ajouter-le-nouvel-objet-à-la-barre-insérer">Pour ajouter le nouvel objet à la barre Insérer :</h1> <ol> <li>Recherche la ligne suivante située au début du fichier inserbar.xml :</li> </ol> <pre><code class="language-twig"><category id="DW_Insertbar/Common"/MMString:name="insertbar/category/common" folder="Common"> </code></pre> <p>Cette ligne indique le début de la catégorie Commun de la barre Insérer.</p> <ol> <li>Créée une nouvelle ligne à la suite de la balise category, puis insérez la balise button en lui assignant les attributs id, image et file correspondant à l'objet Strikethrough.</li> </ol> <p>L'ID doit correspondre au nom unique du bouton. Conformément aux conventions de dénomination, utilisez DW_Text_Strikethrough pour cet objet. Les attributs image et file indiquent simplement à Dreamweaver l'emplacement des fichiers en rapport avec l'objet, comme indiqué ci-dessous :</p> <pre><code class="language-txt"><button id="DW_Text_Strikethrough" image="Text\Strikethrough.gif" file="Text\Strikethrough.htm"/> </code></pre> <ol> <li>Enregistrez le fichier insertbar.xml. </li> <li>Rechargez les extensions (voir Rechargez les extensions., page 111).</li> </ol> <p>Le nouvel objet apparait au début de la catégorie Commun de la barre Insérer, comme indiqué ci-dessous :</p> <p><img alt="" src="images/f84eda94b7f90fe6c2d4cdc3a667fe8cc45b120be2470cb68627d4471a184057.jpg" /></p> <h1 id="ajout-dune-boîte-de-dialogue">Ajout d'une boîte de dialogue</h1> <p>Vouss pouvez ajouter un-formulaire à votre object de manière à ce que l'utilisateur puisse indiquer des commentaires avant que Dreamweaver n'insère le code spécifique (par exemple, l'objet Hyperlien nécessite la saisie des valeurs texte, lien, cible, index de catégorie, titre et clé d'accès). Dans cet exemple, vous ajoutez un-formulaire à l'objet Barre créé dans l'exemple précédent. Le formulaire entraîne l'ouverture d'une boîte de dialogue permettant à l'utilisateur de colorer le texte en rouge et d'ajouter la balise Strikethrough.</p> <p>Cet exemple suppose que vous avez déjà créé un fisquier JavaScript distinct nommé Strikethrough.js.</p> <p>Tout d'abord, dans le fichier Strikethrough.js, ajoutez la fonction appelée par le formulaire si l'utilisateur modifie la couleur du texte. Cette fonction est similaire à la fonction objectTag() de l'objet Strikethrough, mais elle est facultative.</p> <h1 id="pour-creer-la-fonction">Pour creer la fonction :</h1> <ol> <li>Àpres la fonction objectTag() dans Strikethrough.js, créez la fonction fontColorRed() en entrant le code suivant :</li> </ol> <p>function fontColorRed(){ var dom = dw.getDocumentDOM();if (dw.getFocus() = = 'TextView' || dw.getFocus(true) = = 'html'){ var upCaseTag = (dw.getPreferenceString("Source Format","Tags Upper Case", "") = = 'TRUE'); //Manually wrap tags around selection. if (upCaseTag){ dom.source unwrapSelection('<FONT COLOR "#FF0000">', "</FONT>");} else{ dom.source unwrapSelection('<font color "#FF0000">', "</font>");} }else if (dw.getFocus() = = 'document') { dom.applyFontMarkup("color", "#FF0000"); } //Just return -- don't do anything else. return; }</p> <p>Parce que dom.applyCharacterMarkup() ne gère pas les modifications de couleur de police, vous devez identifier la fonction API correspondant à ce type d'opération. (Pour plus d'informations, voir dom.applyFontMarkup() dans le Guide des API de Dreamweaver).</p> <ol> <li>Enregistrez le fichier sous le nom Strikethrough.js.</li> </ol> <p>Ensuite, ajoutez le formulaire au filchier Strikethrough.htm. Le formulaire illustré dans l'exemple ci-dessous est une simple case à cocher permettant d'appeler la fonction</p> <p>fontColorRed() lorsqu'elle est activée. La balise form permet de définir votre-formulaire, la balise table assure la définition de sa mise en forme (si vous n'effectuez pas cette étape, la taille de la boîte de dialogue ou la disposition des champs risque d'être incorrecte).</p> <h1 id="pour-ajouter-le-formulaire">Pour ajouter le formulaire :</h1> <ol> <li>Ajoutez le code ci-dessous après la balise body :</li> </ol> <p></form> </p> <table border = "0" height = "100" width = "100"> <tr align "baseline"> <td align "left" nowrap> <input type "checkbox" name "red" onClick fontColorRed()>Red text</ input> </td> </tr> </table> </form> <ol> <li>Enregistrez le fichier sous le nom Strikethrough.htm. </li> <li>Rechargez les extensions (voir Rechargez les extensions., page 111).</li> </ol> <h1 id="pour-tester-la-boite-de-dialogue">Pour tester la boite de dialogue :</h1> <ol> <li>Cliquez sur la case à cocher Texte rouge.</li> </ol> <p><img alt="" src="images/b0e376dadf391087b04602838bbc58cee376de0d66a49aef2331a67f4fd3d3e5.jpg" /></p> <ol> <li>Cliques sur OK pour executer la fonction objectTag(), qui barre le texte :</li> </ol> <p><img alt="" src="images/62268f66eb652d0778ab72527cbf93cf43acf63f58c24d12f3773976915e18c4.jpg" /></p> <h1 id="creation-dun-menu-dérouulant-dans-la-barre-insérer">Creation d'un menu dérouulant dans la barre Insérer</h1> <p>L'organisation de la barre Insérer de Dreamweaver se présente sous une nouvelle forme et prend désormais en charge les menus déroulants regroupant des sous-ensembles d'objets, comme indiqué dans la figure suivante.</p> <p><img alt="" src="images/238664ae0ff9f153ea8ee7b2ed97d38c47881311ac18d57dc90befe4e708643a.jpg" /></p> <p>L'exemple ci-dessous cree une nouvelle categorie, Editorial, dans la barre Inserer, puis ajoute un menu déroulant à cette categorie. Le menu déroulant regroupe l'objet Strikethrough, ainsi que l'objet Blue Text créé dans la procEDURE ci-dessous. Les objets de la catégorie Editorial permettent aux utilisateurs d'insérer des commentaires d'édition dans un fichier et de barrer le contenu à supprimer ou d'afficher en bleu un nouveau contenu.</p> <h1 id="pour-organiser-les-fichiers">Pour organiser les fichiers :</h1> <ol> <li> <p>Créez le dossier Configuration/Objects/Editorial dans le dossier d'installation de Dreamweaver.</p> </li> <li> <p>Copiez les fichiers correspondant à l'exemple d'objet Strikethrough créé plus haut dans le dossier Editorial (Strikethrough.htm, Strikethrough.js et Strikethrough.gif).</p> </li> </ol> <h1 id="pour-creer-iobjet-blue-text">Pour creer I'objet Blue Text :</h1> <ol> <li>Creez un fichier HTML. </li> <li>Ajoutez le code suivant:</li> </ol> <pre><code class="language-html"><html> <head> <title>Blue Text</title> <script language="javascript"> // API FUNCTIONS function isDOMRequired() { // Return false, indicating that this object is available in Code view. return false; } function objectTag() { // Manually wrap tags around selection. var dom = dw.getDocumentDOM(); if (dw.getFocus() == 'TextView' || dw.getFocus(true) == 'html') { var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "") == 'TRUE'); // Manually wrap tags around selection. if (upCaseTag) { dom.source unwrapSelection(['<FONT COLOR="#0000FF"', ':</FONT]); } else { dom.source unwrapSelection(['<font color="#0000FF"', ':</font']); } else if (dw.getFocus() == 'document') { dom.applyFontMarkup("color", "#0000FF"); } // Just return -- don't do anything else. return; } </script> </head> <body> </body> </html> </code></pre> <ol> <li>Enregistrez le fichier sous le nom AjoutBleu.htm dans le dossier Editorial.</li> </ol> <p>You pouvez maintenant creer une image pour l'objet Blue Text.</p> <h1 id="pour-creer-limage">Pour creer l'image :</h1> <ol> <li>Crééz un fjichier GIF de 18 × 18 pixels, similaire à la figure ci-dessous:</li> </ol> <p><img alt="" src="images/cbf92e52c321d6f21e9b641507137bd88cce089ae4167e9fc79e6edc3589a7d9.jpg" /></p> <ol> <li>Enregistrez l'image sous le nom AjoutBleu.gif dans le dossier Editorial.</li> </ol> <p>Modifiez ensuite le fjichier insertbar.xml. Ce fjichier définit les objets de la barre Insérer ainsi que leur emplacement. Notez les nombreuses balises menubutton et leurs attributs dans les balises category ; ces balises menubutton définit essent chacune des menus déroulants de la catégorie HTML. Dans les balises menubutton, chaque balise button définit l'un des éléments du menu déroulant.</p> <h1 id="pour-modifier-insertbarxml">Pour modifier insertbar.xml :</h1> <ol> <li>Recherche la ligne de code suivante située au début du fichier :</li> </ol> <pre><code class="language-xml"><insertbar xmlns:MMString="http://www.macromedia.com/schemes/data/ string"/> </code></pre> <p>La balise insertbar définit le début de chacun des éléments de la barre Insérer.</p> <ol> <li>A la suite de cette ligne, insérez une balise category pour la catégorie Editorial, en lui assignant les attributs ID (unique), name et folder, puis insérez une balise de fermeture category comme indiqué dans l'exemple suivant :</li> </ol> <pre><code class="language-xml"><category id="DW_Insertbar_Editional" name="Editorial" folder="Editorial"> </category> </code></pre> <ol> <li>Rechargez les extensions. Pour plus d'informations sur le rechargement des extensions, voir Rechargez les extensions., page 111.</li> </ol> <p>La catégorie Editorial apparait dans la barre Insérer :</p> <p><img alt="" src="images/1c9d55cac0ba1834712b9a3929693ff59f22208ce981b57693fbc2c854b91727.jpg" /></p> <ol> <li>Entre les balises d'ouverture et de fermeture category, ajoutez le menu dérouulant en insérant la balise menubutton ainsi que les attributs suivants, y compris un ID unique.</li> </ol> <pre><code class="language-twig"><menubutton id="DW_InsertbarMARKUP" name="markup" image="Editorial\Strikethrough.gif" folder="Editorial"> </code></pre> <p>Pour plus d'informations sur les attributs, voir Attributes des balises de définition de la barre Insérer, page 152.</p> <ol> <li>Ajoutez les objets du nouveau menu déroulant à l'aide de la balise button, comme suit :</li> </ol> <pre><code class="language-txt"><button id="DW_Editional_Strikethrough" image="Editorial\Strikethrough.gif" file="Editorial\Strikethrough.htm"/> </code></pre> <ol> <li>A la suite de l'objet Strikethrough, insérez l'objet Blue Text, comme suit :</li> </ol> <pre><code class="language-xml"><button id="DW_Blue_Text" image="Editorial\AddBlue.gif name="Blue Text" file="Editorial\AddBlue.htm"/> </code></pre> <p>La balise button ne possède pas de balise de fermetre séparée, elle se termine simplement par “/>”.</p> <ol> <li>Terminate l'insertion dans le menu dérouulant en spécifique la balise de fermeture << menubutton>.</li> </ol> <p>Le code ci-dessous représenté l'ensemble de la catégorie regroupant le menu dérouulant et les deux objets :</p> <pre><code class="language-txt"><category id="DW_Insertbar_Editional" name="Editorial" folder="Editorial"> <menubutton id="DW_Insertbar_M Markup" name="markup"> image="Editorial\Strikethrough.gif" folder="Editorial"> <button id="DW_Editional_Strikethrough"> image="Editorial\Strikethrough.gif" </button> </category id="DW_Insertbar_Editional" name="Editorial"> </code></pre> <pre><code class="language-xml"><button id="DW_Blue_Text" image="Editorial\AddBlue.gif" name="Blue Text" file="Editorial\AddBlue.htm"/> </menubutton> </category> </code></pre> <h1 id="pour-tester-le-nouveau-menu-déroulant">Pour tester le nouveau menu déroulant :</h1> <ol> <li>Rechargez les extensions. Pour plus d'informations sur le rechargement des extensions, voir Rechargez les extensions., page 111. </li> <li>Cliquez sur le menu Editorial.</li> </ol> <p>Le menu dérouulant ci-dessous s'affiche :</p> <p><img alt="" src="images/af792bf7af9f1b53eb58ca733348a3ca076f0e27d6a528fc523b20c9507658f3.jpg" /></p> <h1 id="api-des-objets">API des objets</h1> <p>Cette section déscrit les fonctions de l'API des objets. Vous doivent définir soit la fonction insertObject(), soit la fonction objectTag(). Pour plus d'informations sur ces fonctions, voir insertObject(), page 172. Les autres fonctions sont facultatives.</p> <h1 id="caninsertobject">canInsertObject()</h1> <h1 id="disponibilité">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-73">Description</h1> <p>Cette fonction détermine si la boîte de dialogue de l'objet doit être affichée.</p> <h1 id="arguments">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées">Valeurs renvoyées</h1> <p>Dreamweaver attend une valeur booléenne.</p> <h1 id="example-77">Example</h1> <p>Le code ci-dessous indique à Dreamweaver de vérifier la présence d'une chaine spécifique dans un document avant de permettre à l'utilisateur d'insérer l'objet selectionné :</p> <p>function canInsertObject(){ var docStr = dw.getDocumentDOM().documentElement外出HTML; var patt = /hava/; var found = ( docStr.search patt) ! = -1 ); var insertionIsValid = true; if(!found){ insertionIsValid = false; alert("the document must contain a 'hava' string to use this object.);} return insertionIsValid;}</p> <h1 id="displayhelp">displayHelp()</h1> <h1 id="description-74">Description</h1> <p>Si vous définisse cette fonction, un bouton Aide apparait sous les boutons OK et Annuler dans la boîte de dialogue Paramètres. Cette fonction est appelée lorsque l'utilisateur clique sur le bouton Aide.</p> <h1 id="arguments-2">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-2">Valeurs renvoyées</h1> <p>Dreamweaver n'attend rien.</p> <h1 id="example-78">Example</h1> <p>L'exemple suivant permet d'afficher le fichier monObjetAide.htm dans un navigateur ; ce fichier explique l'utilisation de l'extension :</p> <p>function displayHelp(){ var myHelpFile dw_configurationPath() ^+ '/ExtensionsHelp/myObjectHelp.htm'; dwbrowseDocument(myHelpFile); <br /> }</p> <h1 id="isdomrequired">isDomRequired()</h1> <h1 id="description-75">Description</h1> <p>Cette fonction déterminée si l'objet requisert un DOM valide pour fonctionner. Si cette fonction renvoie la valeur true ou si la fonction n'est pas définie, Dreamweaver suppose que la commande nécessite un DOM valide et synchronise les modes Code et Création du document avant de l'exécuter. La synchronisation met à jour toutes les modifications effectuees en mode Affichage de code dans le mode Création.</p> <h1 id="arguments-3">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyees">Valeurs renvoyees</h1> <p>Dreamweaver attend la valeur true si une commande nécessite un DOM valide pour fonctionner et false dans le cas contraire.</p> <h1 id="insertobject">insertObject()</h1> <h1 id="disponibilité-2">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-76">Description</h1> <p>Cette fonction est obligatoire si la fonction objectTag() n'est pas définie. Elle est appelée si l'utilisateur clique sur OK. Elle insère du code dans le document de l'utilisateur et ferme la boîte de dialogue ou affiche un message d'erreur sans fermer la boîte de dialogue. Il s'agit d'une fonction de substitution à la fonction objectTag(). Elle ne suppose pas que l'utilisateur tape son texte au niveau du point d'insertion actué et permet la validation des données lorsque l'utilisateur clique sur OK. Utilisez la fonction insertObject() dans l'une des conditions suivantes :</p> <p>Vosdevezinsereruncodeaplusieurolndroits. <br /> Vousdevezinsereuncodea unendroitautre quele pointd'insertion. <br /> Vousdevez valider une entree avant d'inserer le code.</p> <p>Si aucune de ces conditions ne s'applique, utilisez la fonction objectTag().</p> <h1 id="arguments-4">Arguments</h1> <p>Aucun.</p> <h1 id="valeurs-renvoyées-3">Valeurs renvoyées</h1> <p>Dreamweaver attend soit une châne contenant un message d'erreur, soit une châne vide. Dans ce dernier cas, la boîte de dialogue de l'objet se ferme lorsque l'utilisateur clique sur OK. Sinon, Dreamweaver affiche le message d'erreur et la boîte de dialogue reste à l'écran.</p> <h1 id="activateur">Activateur</h1> <p>canInsertObject()</p> <h1 id="example-79">Example</h1> <p>Dans l'exemple ci-dessous, la fonction insertObject() est utilisé car une entrée doit être validée avant d'insérer le code :</p> <pre><code class="language-javascript">function insertObject() { var theForm = document.forms[0]; var nameVal = theForm.firstField.value; var passwordVal = theForm(secondField.value; var errMsg = "", var isValid = true; // ensure that field values are complete and valid if (nameVal == "") || passwordVal == "") { errMsg = "Complete all values or click Cancel." } else if (nameVal.length < 4 || passwordVal.length < 6) { errMsg = "Your name must be at least four characters, and your password at least six"; } </code></pre> <pre><code class="language-txt">if(!errMsg) { //do some document manipulation here.Exercise left to the reader } return errMsg; 1 </code></pre> <h1 id="objecttag">objectTag()</h1> <h1 id="description-77">Description</h1> <p>Les fonctions objectTag() et insertObject() s'excluent mutuellesment : si ces deux fonctions sont définies dans un document, la fonction objectTag() a la priorité. Pour plus d'informations, consultez la section insertObject(), page 172.</p> <p>Cette fonction insère une châne de code dans le document de l'utilisateur. Dans Dreamweaver MX, le renvoi d'une châne vide ou d'une valeur null (aussi appelée « return; ») signale à Dreamweaver qu'aucune action ne doit être effectué.</p> <h1 id="remarque-15">REMARQUE</h1> <p>Dans ce cas, les modifications sont censées avoir été effectuees manuellement avant l'instruction return ; aussi, ne rien faire dans ce cas n'équivaut pas à cliquer sur Annuler.</p> <p>Dans Dreamweaver 4, si le mode Code est actif et que la sélection porte sur une plage (par opposition au point d'insertion), cette dernière est replacée par la châne renvoyée par la fonction objectTag(). La valeur est true, même si la fonction objectTag() renvoie une châne vide ou ne re nivoie rien. La fonction objectTag() renvoie une châne vide ou une valeur null car l'utilisateur a déjà modifié manuellement le document. Dans le cas contraire, des guillemets doubles ("") supplément souvent les modifications en replacçant la sélection.</p> <h1 id="arguments-5">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-4">Valeurs renvoyées</h1> <p>Dreamweaver attend la chaine à insérer dans le document de l'utilisateur.</p> <h1 id="example-80">Example</h1> <p>L'exemple suivant de la fonction objectTag() insère une combinaison OBJECT/EMBED pour un contrôle ActiveX et un plug-in spécifique :</p> <pre><code class="language-javascript">function objectTag() { return '\n' + '<OBJECT CLASSID="clsid:166F100B-3A9R-11FB-8075444553540000" \n'> </code></pre> <pre><code class="language-txt">+ 'CODEBASE="http://www.mysite.com/product/cabs/- myproduct.cab#version=1,0,0,0" \n' + 'NAME="MyProductName"> \n' + 'PARAM NAME="SRC" VALUE="..." \n' + 'EMBED SRC="HEIGHT="' -\ WIDTH="" NAME="MyProductName"> \n' + '/OBJECT>' </code></pre> <h1 id="windowdimensions">windowDimensions()</h1> <h1 id="description-78">Description</h1> <p>Cette fonction définit les dimensions précises de la boîte de dialogue Options. Si cette fonction n'est pas définie, les dimensions de la fenêtre sont calculées automatiquement.</p> <p>Ne définisse cette fonction que si vous souhaitez utiliser une boîte de dialogue Options ayant des dimensions supérieures à 640 x 480 pixels.</p> <h1 id="arguments-6">Arguments</h1> <p>platform</p> <ul> <li>La valeur de l'argument platform est soit "macintosh", soit "windows", selon la plate-forme utilisé par l'utilisateur.</li> </ul> <h1 id="valeurs-renvoyées-5">Valeurs renvoyées</h1> <p>Dreamweaver attend une chaîne au format "widthInPixels, heightInPixels".</p> <p>Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone des boutons OK et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaitre toutes les options, des barres de défilament s'affichent.</p> <h1 id="example-81">Example</h1> <p>L'exemple suivant de la fonction windowDimensions() regle les dimensions de la boîte de dialogue Paramétres sur 648 x 520 pixels sous Windows et sur 660 x 580 sur Macintosh :</p> <p>function windowDimensions platform){ varretval = "" if (platform "windows"){ retval = "648,520"; }else{ retval = "660,580"; } return retval; <br /> 1</p> <p>Les commandes de Macromedia Dreamweaver 8 permettent d'exécuter presque n'imporce quel type de modification dans le document actif de l'utilisateur, dans d'autres documents ouverts ou dans tout document HTML situé sur un disque local. Les commandes peuvent insérer, supprimer ou réorganiser les balises et les attributs HTML, les commentaires et le texte.</p> <p>Les commandes sont des fichiers HTML. La section BODY d'un fisquier de commandes peut containir un-formulaire HTML acceptant des options pour la commande (par exemple, le tri des éléments d'un tableau et la colonne de referencia du tri). La balise HEAD d'un fisquier de commandes contient des fonctions JavaScript quitrait les entrées de formulaire de la section BODY et contrôle les modifications apportées au document de l'utilisateur.</p> <p>Le tableau ci-dessous recense les fichiers utilisés pour creer une commande.</p> <table><tr><td>Chemin</td><td>Fichier</td><td>Description</td></tr><tr><td>Configuration/Commands/</td><td>nom Commands.htm</td><td>Désigne l'interface utiliser.</td></tr><tr><td>Configuration/Commands/</td><td>nom Commands.js</td><td>Contient les fonctions à executer.</td></tr></table> <h1 id="fonctionnement-des-commandes">Fonctionnement des commandes</h1> <p>Lorsque l'utilisateur clique sur un menu contenant une commande, les événements suivants se produit :</p> <ol> <li>Dreamweaver appelle la fonction canAcceptCommand() pour déterminer si l'option de menu doit être désactivée. Si la fonction canAcceptCommand() renvoie une valeur false, la commande est estompée dans le menu et la procédure s'arrête. Si la fonction canAcceptCommand() renvoie une valeur true, la procédure peut se poursuivre. </li> <li> <p>L'utilisateur selectionne une commande dans le menu.</p> </li> <li> <p>Dreamweaver appelle la fonction receiveArguments(), si elle est définie, dans le fichier de commandes de menu sélectionné afin de permettre à la commande de Traitser tous les arguments transmis depuis l'option de menu ou la fonction dreamweaver.runCommand(). Pour plus d'informations sur la fonction dreamweaver.runCommand(), voir le Guide des API de Dreamweaver. </p> </li> <li>Dreamweaver appelle la fonction commandButtons(), si elle est définie, pour identifier les boutons qui figurent dans la partie droite de la boîte de dialogue Options et le code qui doit être exécuté lorsque l'utilisateur clique sur ces boutons. </li> <li>Dreamweaver recherche la balise FORM dans le fjichier de commandes. S'il existe un formulaire, Dreamweaver appelle la fonction windowDimensions(), qui redimensionne la boîte de dialogue Options contenant les éléments BODY du fjichier. Si la fonction windowDimensions() n'est pas définie, Dreamweaver redimensionne automatiquement la boîte de dialogue. </li> <li>Si la balise BODY du fjichier de commandes contient le gestionnaire onLoad, Dreamweaver l'exécut (que la boîte de dialogue soit affichée ou non). Si aucune boîte de dialogue ne s'affiche, les étapes restantes ne sont pas exécutées. </li> <li>L'utilisateur sélection les options de la commande. Dreamweaver exécute les gestionnaires d'évenements associés aux champs du formulaire au fur et à mesure que l'utilisateur les rencontres. </li> <li>L'utilisateur clique sur l'un des boutons définis par la fonction commandButtons(). </li> <li>Dreamweaver execute le code associé. La boîte de dialogue reste affichée jusqu'à ce que l'un des scripts de la commande appelle la fonction window.close().</li> </ol> <h1 id="ajout-de-commandes-au-menu-commandes">Ajout de commandes au menu Commandes</h1> <p>Dreamweaver ajoute automatiquement tous les fischiers se trouvant dans le dossier Configuration/Commandes au bas du menu Commandes. Pour empêcher qu'une commande ne s'affiche dans le menu Commandes, insérez le commentaire suivant sur la première ligne du fjichier :</p> <p><!- MENU-LOCATION=NONE ---></p> <p>Lorsque cette ligne est presente, Dreamweaver ne cree pas d'ellement de menu pour le fichier et vousdezappelerdw.runCommand()pour executerla commande.</p> <h1 id="exemple-de-commande-simple">Exemple de commande simple</h1> <p>Cette extension simple ajoute un élément dans le menu Commandes et vous permet de convertir le texte sélectionné dans votre document en majuscules ou en minuscules. Lorsque vous cliquez sur l'élement de menu, une interface à trois boutons est activée et vous permet de soumettre votre choix.</p> <p>You creez this extension en executant les etapes suivantes :</p> <ul> <li>Création de l'interface utilisé <br /> ■ Ecriture du code JavaScript <br /> Test de l'extension</li> </ul> <p>Dans cet exemple, deux fischiers sont créés dans le dossier Commands : Change Case.htm, qui renferme l'interface utiliser, et Change Case.js, qui renferme le code JavaScript. Le cas échéant, vous pouvez creer uniquement le fisquier Change Case.htm et insérer le code JavaScript dans la section HEAD.</p> <h1 id="creation-de-linterface-utilisateur">Creation de l'interface utilisateur</h1> <p>L'interface utilisateur est un-formulaire qui contient deux boutons radio, permettant à l'utilisateur de selectionner majuscules ou minuscules.</p> <h1 id="pour-creer-linterface-utiliseateur">Pour creer l'interface utiliseateur :</h1> <ol> <li>Creez un document vierge. </li> <li>Ajoutez le code suivant dans le fichier pour creer le formulaire :</li> </ol> <pre><code class="language-html"><!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> <html> <HEAD> <!-- Copyright 2001-2002 Macromedia, Inc. Tous droits réservés.--> Title>Make Uppercase or Lowercase</Title> <SCRIPT SRC="Change Selection Case.js"></SCRIPT> </HEAD> <BODY> <form name="uor1"> <table border="0"> <!--DWLayoutTable--> <tr> <td valign="top" nowrap><p> <label> <input type="radio" name="RadioGroup1" value="upccase" checked> Uppercase</label> </code></pre> <pre><code class="language-html"><br> <label> <input type="radio" name="RadioGroup1" value="lowercase"> Lowercase</label> </p></td> </tr> </table> </div> </form> </BODY> </HTML> </code></pre> <ol> <li>Enregistrez le fjichier sous le nom Change Case.htm dans le dossier Configuration/Commands.</li> </ol> <p>Le contenu de la balise Title, Majuscules et minuscules, s'affiche dans la barre en haut de la boîte de dialogue. Dans le formulaire, un tableau composé de deux cellules contrôle la mise en forme des éléments. Les cellules contiennent deux boutons radio : Majuscules et Minuscules. Le bouton Majuscules comporte l'attribut checked, ce qui en fait la seLECTION par défaut et confirme que l'utilisateur doit seLECTIONner un des deux boutons ou annuler la commande.</p> <p>Le formulaire doit s'apparenter à l'image suivante.</p> <p><img alt="" src="images/13c5e5c8c7107cd758fae98dd80a15197ad67acec39a98ce6e194dbf07d5cdd8.jpg" /></p> <p>La fonction commandButtons() insère les boutons OK et Annuler qui permettent à l'utilisateur de valider le besoin ou d'annuler l'opération.</p> <h1 id="ecriture-du-code-javascript">Ecriture du code JavaScript</h1> <p>L'exemple suivant est composé de deux fonctions API d'extension, canAcceptCommand() et commandButtons(), appelées par Dreamweaver, et d'une fonction définie par l'utilisateur, changeCase(), appelée depuis la fonction commandButtons().</p> <p>Dans cet exemple, vous allez rédiger du code JavaScript pour exécuter les tâches suivantes :</p> <p>Déterminer si la commande doit être activée ou estompee. <br /> Association de fonctions aux boutons OK et Annuler <br /> Permettre a l'utilisateur deCHOISIR entre majuscules et minuscules</p> <h1 id="déterminer-si-la-commande-doit-être-activée-ou-estompée">Déterminer si la commande doit être activée ou estompée.</h1> <p>La première tâche lors de la création d'une commande est de déterminer les cas où l'objet doit être actif ou non. Lorsque l'utilisateur clique sur le menu Commands, Dreamweaver appelle la fonction canAcceptCommand() pour chaque éléments de menu afin de déterminer si celui-ci doit être activé. Si canAcceptCommand() renvoie la valeur true, Dreamweaver affiche le texte d'objet de menu comme actif ou activé. Si canAcceptCommand() renvoie la valeur false, Dreamweaver estompe l'objet de menu. Dans l'exemple suivant, l'objet de menu est actif lorsque l'utilisateur a sélectionné du texte dans le document.</p> <h1 id="pour-déterminer-si-la-commande-doit-être-activée-ou-estompée">Pour déterminer si la commande doit être activée ou estompée :</h1> <ol> <li>Creez un document vierge. </li> <li>Ajoutez le code suivant :</li> </ol> <p>function canAcceptCommand(){ var theDOM = dw.getDocumentDOM(); // Get the DOM of the current document var theSel = theDOM.getSelected(); // Get start and end of selection var theSelNode theDOM.getSelectedNode(); // Get the selected node var theChildren theSelNode(childNodes; // Get children of selected node return (theSel[0] != theSel[1] && (theSelNode.nodeType = = Node.TXT_node\~ || theSelNode.hasChildNodes() && (theChildren[0].nodeType = = - Node.TXT_node)); <br /> }</p> <ol> <li>Enregistrez le fichier sous le nom Change Case.js dans le dossier Configuration/Commands.</li> </ol> <p>Les premières lignes de la fonction canAcceptCommand() extraient le texte sélectionné en récapierant le DOM du document de l'utilisateur. La fonction getSelection() est alors appelée sur l'objet de document. Ensuite, la fonction récapère le nœud qui contient le texte sélectionné, suivi par ses enfants, comme indiqué dans le code suivant. Enfin, la dernière ligne vérifie si la sélection (ou son premier enfant) est constituée de texte et envoie en retard la valeur true ou false.</p> <p>La première partie de l'instruction return (theSel[0] != theSel[1]) vérifie si l'utilisateur a effectué une sélection dans le document. La variable theSel est un tableau à deux entrées maintainant les décalages de début et de fin de la sélection dans le document. Si les deux valeurs ne sont pas égales, du contenu a été sélectionné. Si les valeurs des deux entrées sont égales, il y a juste un point d'insertion. Rien n'a été sélectionné.</p> <p>La partie suivante de l'instruction return (& (theSelNode.nodeType == Node.Text_NODE) vérifie que le nœud séLECTIONné est constitué de texte. Si la réponse est positive, la fonction canAcceptCommand() renvoie la valeur true. Si le type de nœud n'est pas constitué de texte, le test se poursuit afin de vérifier si le nœud a des enfants (|| theSelNode.hasChildNodes()) et si le type du premier nœud enfant est constitué de texte (& (theChildren[0].nodeType == Node.Text_NODE))). Si les deux conditions sont réunies (true), canAcceptCommand() renvoie la valeur true et Dreamweaver active l'objet de menu en bas du menu Commandes, comme indiqué ci-dessous:</p> <table><tr><td>Commandes</td><td>Site Fenêtre Aide</td></tr><tr><td>Démarrer l'enregistrement</td><td>Ctrl+Maj+X</td></tr><tr><td>Reproduire la commande enregistrée...</td><td></td></tr><tr><td>Modifier la liste de commandes...</td><td></td></tr><tr><td>Télécharger d'autres commandes...</td><td></td></tr><tr><td>Gérer les extensions...</td><td></td></tr><tr><td>Appliquer le format source</td><td></td></tr><tr><td>Appliquer le formatage de source à la sélection</td><td></td></tr><tr><td>Nettoyer le code HTML...</td><td></td></tr><tr><td>Nettoyer HTML Word...</td><td></td></tr><tr><td>Ajouter/Supprimer correction pour redim. dans Netscape...</td><td></td></tr><tr><td>Optimiser l'image dans Fireworks...</td><td></td></tr><tr><td>Créer un album photos pour le Web......</td><td></td></tr><tr><td>Définir le contrôle de couleur</td><td></td></tr><tr><td>Formater le tableau...</td><td></td></tr><tr><td>Trier le tableau...</td><td></td></tr><tr><td>Modifier la casse</td><td></td></tr></table> <p>Dans le cas contraire, canAcceptCommand() renvoie la valeur false et Dreamweaver estompe l'objet, comme indiqué ci-dessous:</p> <table><tr><td>Commandes</td><td>Site Fenêtre Aide</td></tr><tr><td>Démarrer l'enregistrement</td><td>Ctrl+Maj+X</td></tr><tr><td>Reproduire la commande enregistrée...</td><td></td></tr><tr><td>Modifier la liste de commandes...</td><td></td></tr><tr><td>Télécharger d'autres commandes...</td><td></td></tr><tr><td>Gérer les extensions...</td><td></td></tr><tr><td>Appliquer le format source</td><td></td></tr><tr><td>Appliquer le formatage de source à la sélection</td><td></td></tr><tr><td>Nettoyer le code HTML...</td><td></td></tr><tr><td>Nettoyer HTML Word...</td><td></td></tr><tr><td>Ajouter/Supprimer correction pour redim. dans Netscape...</td><td></td></tr><tr><td>Optimiser l'image dans Fireworks...</td><td></td></tr><tr><td>Créer un album photos pour le Web......</td><td></td></tr><tr><td>Définir le contrôle de couleur</td><td></td></tr><tr><td>Formater le tableau...</td><td></td></tr><tr><td>Trier le tableau...</td><td></td></tr><tr><td>Modifier la casse</td><td></td></tr></table> <h1 id="association-de-fonctions-aux-boutons-ok-et-annuler">Association de fonctions aux boutons OK et Annuler</h1> <p>Lorsque l'utilisateur clique sur le bouton OK ou Annuler, l'extension doit executer l'action appropriée. Pour ce faire, vous spécifie la fonction JavaScript associée à un click sur l'un des deux boutons.</p> <h1 id="pour-associé-des-fonctions-aux-boutons-ok-et-annuler">Pour associé des fonctions aux boutons OK et Annuler :</h1> <ol> <li>Ouvrez le fichier Change Case.js dans le dossier Configuration/Commands. </li> <li>En fin de fichier, insérez le code suivant:</li> </ol> <pre><code class="language-javascript">function commandButtons() { return new Array("OK", "changeCase(), "Cancel", "window.close()); } </code></pre> <ol> <li>Enregistrez le fichier.</li> </ol> <p>La fonction commandButtons() entraine l'affichage des boutons OK et Annuler par Dreamweaver et indique la marche à suivre pour Dreamweaver lorsque l'utilisateur clique sur ces boutons. La fonction commandButtons() indique à Dreamweaver qu'il faut appeler changeCase() lorsque l'utilisateur clique sur OK et appeler window.close() lorsque l'utilisateur clique sur Annuler.</p> <h1 id="permettre-à-lutilisateur-dechoisir-entre-majuscules-et-minuscules">Permettre à l'utilisateur deCHOISIR entre majuscules et minuscules</h1> <p>Lorsque l'utilisateur clique sur un élément de menu, l'extension nécessite un mécanisme permettant à l'utilisateur deCHOISIR entre majuscules et minuscules. L'interface utiliser fournit ce mécanisme en définissant deux boutons radio permettant d'offrir ce choix à l'utilisateur.</p> <h1 id="pour-permettre-à-lutilisateur-de-besoin-entre-majuscules-et-minuscules">Pour permettre à l'utilisateur de besoin entre majuscules et minuscules :</h1> <ol> <li>Ouvrez le fichier Change Case.js. </li> <li>En fin de fichier, insérez le code suivant:</li> </ol> <pre><code class="language-javascript">function changeCase() { var uor1; // Check whether user requested uppercase or lowercase. if (document.forms[0].elements[0].checked) uor1 = 'u'; else uor1 = 'l'; // Get the DOM. var theDOM = dw.getDocumentDOM(); } </code></pre> <p>// Get the outerHTML of the HTML tag (the // entire contents of the document). var theDocEl = theDOM.documentElement; var theWholeDoc = theDocEl.outerHTML; //Get the node that contains the selection. var theSelNode = theDOM.getSelectedNode(); //Get the children of the selected node. var theChildren = theSelNode(childNodes; var i = 0 if (theSelNode.hasChildNodes()){ while (i < theChildren.length){ if (theChildren[i].nodeType = = Node.TEXT_NODE){ var selText = theChildren[i].data; var theSel = theDOM.nodeOffsets(theChildren[0]); break; } ++i; } else { //Get the offsets of the selection var theSel = theDOM.getSelected(); //Extract the selection var selText = theWholeDoc.substring(theSel[O],theSel[1]); } if (uor1 = = 'u'){ theDocEl外出HTML = theWholeDoc.substring(O,theSel[O]) ^+ selTexttoUpperCase() ^+ theWholeDoc.substring(theSel[1]); } else { theDocEl外出HTML = theWholeDoc.substring(O,theSel[O]) ^+ selText.toLowerCase() ^+ theWholeDoc.substring(theSel[1]); } // Set the selection back to where it was when you started theDOM.setSelection(theSel[O],theSel[1]); window.close(); // close extension UI</p> <ol> <li>Enregistrez le fjichier sous le nom Change Case.js dans le dossier Configuration/Commands.</li> </ol> <p>La fonction changeCase() est une fonction définie par l'utilisateur qui est appelée par la fonction commandButtons() lorsque l'utilisateur clique sur OK. Cette fonction modifie la casse du texte sélectionné (passage en majuscules ou minuscules). L'interface utiliser reposant sur des boutons radio, une selection sera obligatoirement effectue ; il n'est pas nécessaire de tester le cas où aucun choix n'est effectué par l'utilisateur.</p> <p>La fonction changeCase() teste en premier lieu la propriété document.form[0].elements[0].checked. La propriété</p> <p>document.forms[0].elements[0] se rapporte au premier élément du premier-formulaire de l'objet de document actuel, à savoir l'interface utilisateur de l'extension. La propriété checké prend la valeur true si l'élement est activé. Dans le cas contraire, il prend la valeur false.</p> <p>Dans l'interface, éléments[0] se rapporte au premier bouton radio, à savoir le bouton Majuscules. Un des boutons radio étantforcémentselectionné lorsque l'utilisateur clique sur OK, le code suppose que, si lechioix n'est pas Majuscules, c'est Minuscules qui a eté choisi. La fonction regle la variable uor] sur "u" ou "l" pour stocker la reponse de l'utilisateur.</p> <p>Le code restant dans la fonction recupère le texte sélectionné, le convertit dans la casse sélectionnée et le copie de nouveau à sa place dans le document.</p> <p>Pour extraire le texte sélectionné pour le document de l'utilisateur, la fonction récapère le DOM. Elle recupèvre ensuite l' éléments racine du document, à savoir la balise html. Le document entier est enfin extrait dans la variable theWholeDoc.</p> <p>Ensuite, changeCase() appelle la fonction getSelectedNode() pour modifier le nœud contenant le texte sélectionné. Il recupperoidément les nœuds enfants</p> <p>(theSelNode(childNodes) au cas où la seLECTION serait une balise contenant du texte, comme <b>text</b>.</p> <p>S'il y a des nœuds enfants, (hasChildNodes() renvoie la valeur true), la commande navigue de nœud en nœud à la recherche d'un nœud constitué de texte. Si un tel nœud est trouvé, le texte (theChildren[i].data) est stocké dans SelText et les décalages du nœud textuel sont stockés dans theSel.</p> <p>S'il n'y a peu nœud enfant, la commande appelle la fonction getSelection() et stocke les décalages de début et de fin de seLECTION dans theSel. Il extrait ensuite la chaine entre ces deux décalages et la conserve dans SelText.</p> <p>La fonction vérifie alors la variable uor1 pour déterminer si l'utilisateur a sélectionné les majuscules. Si tel est le cas, la fonction écrit à nouveau le code HTML dans le document en sections : dans un premier temps, du début du document au début de la sélection ; ensuite, le texte sélectionné, converti en majuscules (selText.toUppercase()) et enfin, de la fin du texte sélectionné à la fin du document.</p> <p>Si l'utilisateur selectionne minuscules, la fonction effectue la meme operation mais appelle SelTexttoLowerCase() pour convertir le texte selectionné en minuscules.</p> <p>Finally, changeCase() réinitialise la sélection et appelle window.close() pour fermer l'interface utilisé.</p> <h1 id="test-de-lextension">Test de l'extension</h1> <p>Une fois les fichiers placés dans le dossier Commands, vous pouvez tester l'extension.</p> <h1 id="pour-tester-lextension">Pour tester l'extension :</h1> <ol> <li>Redémarrez Dreamweaver ou rechargez les extensions. Pour plus d'informations sur le rechargement des extensions, voir Rechargez les extensions., page 111.</li> </ol> <p>L'entrée Modifier la casse doitMAINNANTERE AFFICHEE dans le menu Commandes.</p> <ol> <li>Tapez du texte dans un document. </li> <li>Sélectionnéz le texte.</li> </ol> <h1 id="remarque-16">REMARQUE</h1> <p>La commande Modifier la casse est estompée tant que vous n'avez pas sélectionné de texte dans le document.</p> <ol> <li>Sélectionnez Modifier la casse dans le menu Commandes.</li> </ol> <p>Le texte change de casse.</p> <h1 id="api-des-commandes">API des commandes</h1> <p>Les fonctions personalisées de l'API des commandes de menu ne sont pas obligatoires.</p> <h1 id="canacceptcommand">canAcceptCommand()</h1> <h1 id="description-79">Description</h1> <p>Cette fonction indique si la commande est adaptée à la seLECTION en cours.</p> <h1 id="remarque-17">REMARQUE</h1> <p>Ne définissez la fonction canAcceptCommand() que s'il existe au moins un cas où elle renvoie la valeur false. Si la fonction n'est pas définie, la commande est considérée comme appropriée. Ce processus entraine des gains de temps et de performances.</p> <h1 id="arguments-7">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-6">Valeurs renvoyées</h1> <p>Dreamweaver s'attend à receivevoir la valeur true si la commande est appropriée. Si la valeur est false, la commande apparait estompée dans le menu.</p> <h1 id="example-82">Example</h1> <p>Dans l'exemple suivant, la fonction canAcceptCommand() rend la commande disponible uniquement lorsque la selection correspond à un tableau :</p> <p>function canAcceptCommand(){ varrettval=false; varselObj dw.getDocumentDOM.getSelectedNode(); return (selObj.nodeType = = Node.ELEMENT_NODE&& selObj.tagName = = "TABLE");{ retval true; } return reval;</p> <h1 id="commandbuttons">commandButtons()</h1> <h1 id="description-80">Description</h1> <p>Cette fonction définit les boutons devant figurer dans la partie droite de la boîte de dialogue Options et leur comportement lorsque l'utilisateur clique dessus. Si cette fonction n'est pas définie, aucun bouton n'apparait et la section BODY du filchier de commandes s'étend de façon à replir la totalité de la boîte de dialogue.</p> <h1 id="arguments-8">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyees-2">Valeurs renvoyees</h1> <p>Dreamweaver renvoie un tableau contenant un nombre pair d' éléments. Le premier élément est une chaine contenant le libellé du premier bouton. Le deuxième élément est une chaine de code JavaScript définitissant le comportement du premier bouton lorsque l'utiliseur clique dessus. Les autres éléments définitennent les boutons supplémentaires de la même manière.</p> <h1 id="example-83">Example</h1> <p>L'instance suivante de commandButtons() définit trois boutons : OK, Annuler et Aide :</p> <p>function commandButtons(){ return new Array("OK", "doCommand()","Cancel", "window.close()”,"Help","showHelp())"); }</p> <h1 id="isdomrequired-2">isDomRequired()</h1> <h1 id="description-81">Description</h1> <p>Cette fonction détermine si la commande requiert un DOM valide pour fonctionner. Si cette fonction renvoie une valeur true ou si la fonction n'est pas définie, Dreamweaver suppose que la commande nécessite un DOM valide et synchronise les modes Affichage de code et Création du document avant de l'exécuter. La synchronisation entraîne la mise à jour de toutes les modifications effectuees en mode Affichage de code dans le mode Création.</p> <h1 id="arguments-9">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-7">Valeurs renvoyées</h1> <p>Dreamweaver renvoie la valeur true si une commande nécessite un DOM valide pour fonctionner, sinon false.</p> <h1 id="receivearguments">receiveArguments()</h1> <h1 id="description-82">Description</h1> <p>Cette fonction traite tous les arguments provenant d'un élément de menu ou de la fonction dw.runCommand().</p> <h1 id="arguments-10">Arguments</h1> <p>{arg1}, {arg2},...{argN}</p> <ul> <li>Si l'attribut arguments est défini pour une balise menuitem, la valeur de l'attribut est transmise à la fonction receiveArguments() sous forme d'un ou plusieurs arguments. Les arguments peuvent également être transmis à une commande par la fonction dw.runCommand().</li> </ul> <h1 id="valeurs-renvoyées-8">Valeurs renvoyées</h1> <p>Dreamweaver ne renvoie rien.</p> <h1 id="windowdimensions-2">windowDimensions()</h1> <h1 id="description-83">Description</h1> <p>Cette fonction définit les dimensions de la boîte de dialogue des paramètres. Si cette fonction n'est pas définie, les dimensions de la fenêtre sont calculées automatiquement.</p> <p>Ne définisse cette fonction que si vous souhaitez utiliser une boîte de dialogue Options ayant des dimensions supérieures à 640 x 480 pixels.</p> <h1 id="arguments-11">Arguments</h1> <p>platform</p> <ul> <li>La valeur de l'argument platform est soit "macintosh", soit "windows", selon la plate-forme utilisé par l'utilisateur.</li> </ul> <h1 id="valeurs-renvoyées-9">Valeurs renvoyées</h1> <p>Dreamweaver renvoie une chaîne au format "widthInPixels, heightInPixels".</p> <p>Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone des boutons OK et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaitre toutes les options, des barres de défilament s'affichent.</p> <h1 id="example-84">Example</h1> <p>Dans l'exemple suivant, la fonction windowDimensions() définit les dimensions de la boîte de dialogue des paramètres à 648 x 520 pixels :</p> <pre><code class="language-javascript">functionwindowDimensions(){ return"648,520"; </code></pre> <h1 id="menu-et-commandes-de-menu">Menu et commandes de menu</h1> <p>Macromedia Dreamweaver 8 create les menus à partir de la structure définie dans le fjichier menus.xml du dossier Configuration/Menu des Dreamweaver. Vous pouvez réorganiser, renomer ou supprimer des commandes de menu en modifiant le fjichier menus.xml. Vous pouvez également ajouter, modifier ou supprimer des raccourcis clavier associés aux commandes de menu. Cependant, il est généralement plus simple de passer à cet effet par l'Editeur de raccourcis clavier (voir l'aide de Dreamweaver). Les modifications effectuees dans les menus Dreamweaver ne sont prises en compte qu'après le redémarrage de Dreamweaver ou le rechargement des extensions.</p> <p>Sur un système d'exploitation multiutilisateur, lorsque vous effectuez des modifications dans Dreamweaver qui affectent le fjichier menus.xml (par exemple, si vous modifiez les raccourcis clavier via l'Editeur de raccourcis clavier), Dreamweaver create un nouveau fjichier menus.xml dans votre dossier de configuration utiliser. Pour personneliser le fjichier menus.xml dans un système d'exploitation multiutilisateur, modifier la copie du fjichier qui se trouve dans votre dossier de configuration utiliser ou copiez le fjichier menus.xml principal dans ce dossier, si Dreamweaver ne l'a pas déjà fait. Pour plus d'informations, consultez la section Dossiers de configuration multiutilisateur, page 111.</p> <p>Si vous ouvrez le fjichier menus.xml dans un éditeur XML, il est possible que des messages d'erreur concernant lesesperluettes (&) du fjichier menus.xml s'affichent. Nous vous recommendons de modifier le fjichier menus.xml dans un éditeur de texte ; évitez de le modifier dans Dreamweaver. Pour toutes informations de base sur XML, voir l'aide de Dreamweaver.</p> <p>Avant de modifier le fichier menus.xml ou tout autre fichier de configuration Dreamweaver, effectuez une copie de sauvegarde. En effet, en cas d'erreur, la seule maniere de restaurer un ensemble de menus consiste à remplacer le fichier menus.xml. Si vous avez oublé d'effectuer une sauvegarde, vous pouvez utiliser celle du fichier menus.xml par défaut qui se trouve dans le dossier Configuration. Cette copie se nomme menus.bak. Pour restaurer l'ensemble de menus par défaut, remplacez le fichier menus.xml par une copie du fichier menus.bak.</p> <h1 id="a-propos-du-fichier-menusxml">A propos du fichier menus.xml</h1> <p>Le fjichier menus.xml contient une liste structurée des barres de menus, menus, commandes de menu, séparateurs,.listes de raccourcis et raccourcis clavier. Ces éléments sont décrits par des balises XML que vous pouvez modifier dans un éditeur de texte.</p> <h1 id="remarque-18">REMARQUE</h1> <p>Procedez avec prudence lorsque vous modifie les menus. Dreamweaver ignore les menus ou commandes de menu compteant des erreurs de syntaxe XML.</p> <p>Une barre de menus (indiquée par des balises menubar d'ouverture et de fermeture) est un menu ou un ensemble de menus distinct. Par exemple, il est possible que vous ayez une barre de menus principale, une barre de menus fenêtre Site distincte (apparaissant sous Windows mais pas sur Macintosh) et une barre de menus pour chaque menu contextualuel. Chaque barre de menus compte un ou plusieurs menus indiqués par des balises menu. Chacun de ces menus compte une ou plusieurs commandes de menu, indiquées par des balises menuitem et définies par divers attributes. Un menu peut également comporter des séparateurs (indiqués par des balises separator) ainsi que des sous-menus.</p> <p>Outre les raccourcis clavier associés aux commandes de menus, Dreamweaver compte un grand nombre d'autres raccourcis clavier, notamment des raccourcis secondaires et des raccourcis activités dans des contextes particuliers. Par exemple, le raccourci Ctrl+Y (Windows) ou Commande+Y (Macintosh) correspond à la commande Rétablir, mais il est également possible d'utiliser le racourci Ctrl+Maj+Z ou Commande+Maj+Z. Ces raccourcis secondaires (ainsi que d'autres racourcis ne pouvant pas été représentés dans les balises des commandes de menu) sont définis dans les listes de racourcis du fichier menus.xml. Ces listedes de racourcis (indiquées par des balises shortcutlist) comportent un ou plusieurs racourcis indiqués par des balises shortcut.</p> <p>Les sections ci-dessous décrivent la syntaxe des balises menus.xml. Les attributs facultatifs sont signalés dans la liste des attributs par des accolades ({}). Les attributs qui ne sont pas signalés ainsi sont considérés comme obligatoires.</p> <h1 id="menubar"><menubar></h1> <h1 id="description-84">Description</h1> <p>Fournit des informations sur une barre de menus de la structure de menus de Dreamweaver.</p> <h1 id="attributes-62">Attributes</h1> <p>name,{app},id,{platform}</p> <p>name Nom de la barre de menus. Bien que l'attribut name soit obligatoire, vous pouvez lui assigner la valeur "" <br /> - app Nom de l'application dans laquelle la barre de menus est disponible. Non utilisé actuellement. <br /> - id ID de menu de la barre de menus. Les ID de menu du fichier menus.xml doivent tous être uniques. <br /> ■ platform Indique que la barre de menus ne doit apparaître que sur la plate-forme spécifique. Valeurs gériées : "win" et "mac".</p> <h1 id="contenu-22">Contenu</h1> <p>Cette balise doit composer une ou plusieurs balises menu.</p> <h1 id="contenant-21">Contenant</h1> <p>Néant</p> <h1 id="example-85">Example</h1> <p>La barre de menus principale (fenêtre de document) est définie par la balise menubar suivante :</p> <pre><code class="language-txt"><menubar name="Main Window" id="DWMainWindow"> <!-- balises menu ici --> </menubar> </code></pre> <h1 id="menu-2"><menu></h1> <h1 id="description-85">Description</h1> <p>Fournit des informations sur un menu ou un sous-menu de la structure de menus de Dreamweaver.</p> <h1 id="attributes-63">Attributes</h1> <pre><code class="language-txt">name,{app},id,{platform},{showIf} </code></pre> <p>name Nom du menu tel qu'il apparait dans la barre de menus. Pour définir la clé d'accès (mnémonique) du menu sous Windows, insérez un trait de soulignement (_) avant la dette d'accès. Sur Macintosh, le trait de soulignement est supprimé automatiquement. <br /> - app Nom de l'application dans laquelle le menu est disponible. Non utilisé actuellement. <br /> id ID du menu. Les ID de menu du fichier doivent tous etre uniques. <br /> ■ platform Indique que le menu ne doit apparaître que sur la plate-forme spécifique. Valeurs gériées : "win" et "mac".</p> <p>showIf Indique que le menu ne doit apparaître que si l'activateur Dreamweaver spécifique a la valeur true. Les activateurs possibles sont: _SERVERMODEL.asp, _SERVERMODEL.aspNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML (pour toutes les versions de Macromedia ColdFusion), _SERVERMODEL_CFML_UD4 (réservé à UltraDev version 4 de ColdFusion), _SERVERMODEL_PHP, _FILE_template, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES et _VIEW_STANDARD. Vous pouvez spécifique plusieursActivateurs en les séparant par des virgules (chaque virgule signifie ET). Vous pouze utiliser des points d'exclamation ("!") pour indiquer NE PAS. Ainsi, si vous souhaitez que le menu n'apparaissé qu'en mode Code dans une page ASP, définitisse les attributs de la façon suivante: showIf="_VIEW_CODE", _SERVERMODEL.asp".</p> <h1 id="contenu-23">Contenu</h1> <p>Cette balise peut containir une ou plusieurs balises menuitem et separator. Elle peut également containir d'autres balises menu (pour creer des sous-menus) ainsi que des balises HTML comment standard.</p> <h1 id="contenant-22">Contenant</h1> <p>Cette balise doit être imbriquée dans une balise menubar.</p> <h1 id="example-86">Example</h1> <pre><code class="language-html"><menu name="_File" id="DWMenu_File"> <!-- balises menuitem, separator, menu et comment ici--> </menu> </code></pre> <h1 id="menuitem-2"><menuitem></h1> <h1 id="description-86">Description</h1> <p>Définit une commande de menu Dreamweaver.</p> <h1 id="attributes-64">Attributes</h1> <pre><code class="language-javascript">name,id,{app},{key},{platform},{enabled},{arguments},{command},{file},{checked},{dynamic},{isdomrequired},{showIf} </code></pre> <p>name Nom de la commande intégrée au menu. Untrait de soulignement indique que la letter suivante est définié comme clé d'accès (mnémonique) de la commande (sous Windows uniquement). <br /> - id Permet à Dreamweaver d'identifier l'élement. Cet ID doit être unique dans l'ensemble de la structure de menus. Si vous ajoutez de nouvelles commandes de menu au fichier menus.xml, indiquez le nom de votre entreprise ou toute autre chaîne unique comme préfixe aux ID des commandes de menu.</p> <ul> <li> <p>app Nom de l'application dans laquelle figure la commande de menu. Non utilisé actuellesment. <br /> key Raccourci clavier de la commande, le cas échéant. Utilisez les chaînes suivantes pour spécifique les touches de modification :</p> </li> <li> <p>Cmd désigne la touche Ctrl (Windows) ou Commande (Macintosh). </p> </li> <li>Alt et Opt désignent la touche Alt (Windows) ou la touche Option (Macintosh). Ces chaînes sont interchangeables. <br /> Shift désigne la touche Maj,quelle que soit la plate-forme utilisée. </li> <li>Ctrl désigne la touche Ctrl, qu'elle que soit la plate-forme utilisé. <br /> Lorsque plusieurs touches de modification sont assignées à un raccourci, elles sont séparées par un signe plus (+). Par exemple, la chaîne Cmd+0pt+5 dans l'attribut key signifie que l'utilisateur doit appuyer sur Ctrl+Alt+5 (Windows) ou Commande+Option+5 (Macintosh) afin d'exécuter la commande de menu. </li> <li> <p>Les touches spéciales sont indiquées par leur nom : F1 à F12, Pg. Suiv., Pg. Préc., Orig., Fin, Inser, Suppr, Tab, Echap, Ret. Arr. et Espace. Vous pouvez également assigner les touches de modification aux touches spéciales.</p> </li> <li> <p>platform Indique la plate-forme sur laquelle apparait l'élement. Les valeurs générées sont les suivantes "win" (Windows) ou "mac" (Macintosh). Si vous ne spécifieaucun attribut platform, la commande de menu apparait sur les deux plates-formes. Si vous souhaitez qu'une commande de menu ait un comportement spécifique en fonction de la plate-forme, spécifiez deux commandes de menu avec un nom identique (mais des ID distincts): la première contient l'attribut platform="win", la seconde l'attribut platform="mac". <br /> ■ enabled Fournit un code JavaScript (généralement un appel de fonction JavaScript) déterminant si la commande de menu est actuellément activée. Si la fonction renvoie la valeur false, la commande de menu est estompée. La valeur par défaut est "true", mais il est préféable de spécifique systématiquement une valeur même si la valeur est "true". </p> </li> <li> <p>arguments Fournit des arguments que Dreamweaver transmet au code du fichier JavaScript indiqué dans l'attribut file. Ces arguments doivent être entourés d'apostrophes (), à l'intérieur de la chaine de valeur d'un attribut délimiterée par des guillemets doubles. <br /> command Specifie une expression JavaScript qui est executée lorsquel l'utilisateur selectionne l'objet dans le menu. Pour specifier un code JavaScript complexe, utilisez un:fichier JavaScript (indiquedansl'attribut file).Vousdezspecifierl'attribut file ou command pour chaque commande de menu.</p> </li> <li> <p>file Nom du fichier HTML contenant le code JavaScript qui contrôle la commande de menu. Sécífiez le chemin du fichier par rapport au dossier Configuration (par exemple, pour la commande de menu Aide > Bienvenue, spécifique l'attribut file="Commands/Welcome.htm"). L'attribut file remplace les attributs command, en能力和 checked. Vous doivent spécifier l'attribut file ou command pour chaque commande de menu. Pour plus d'informations sur la création d'un fichier de commandes par l'intérimédiaire du panneau Historique, voir l'aide de Dreamweaver. Pour plus d'informations sur la réduction des commandes JavaScript, voir Chapitre 7, "Commandes," on page 177. </p> </li> <li>checked Expression JavaScript déterminant si une coche doit s'afficher en regard de la commande de menu dans le menu ; si la valeur de cette expression est true, la coche s'affiche. </li> <li>dynamic Si cet attribut est spécifique, il indique que la commande de menu doit être déterminée dynamiquement par un fisier HTML; ce dernier contient un code JavaScript définitissant le texte et l'état de la commande de menu. Si vous spécifiez l'attribut dynamic pour une balise, vous doivent également spécifier l'attribut file. <br /> ■ isdomrequired Indique s'il est nécessaire de synchroniser les modes Creation et Code avant d'executer le code associé à cette commande de menu. Les valeurs admises sont : "true" (par défaut) et "false". Si vous définisse la valeur "false", les modifications apportées au fichier par la commande de menu n'utilisent pas le DOM Dreamweaver. Pour plus d'informations sur le DOM, voir Chapitre 5, "Modèle d'objet de document (DOM) Dreamweaver," on page 133. <br /> showIf Indique que la commande de menu ne doit apparaitre que si la valeur de l'activateur Dreamweaver spécifié est true. Les activateurs possibles sont : _SERVERMODEL.asp, _SERVERMODEL.aspNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML (pour toutes les versions de ColdFusion), _SERVERMODEL_CFML_UD4 (applicable uniquement à UltraDev version 4 de ColdFusion), _SERVERMODEL_PHP, _FILE_template, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES et _VIEW_STANDARD. Vous pouvez spécifique plusieurs activateurs en les séparant par des virgules (chaque virgule signifie ET). Vous pouvez utiliser des points d'exclamation ("!") à titre d'exclusion. Ainsi, si vous souhaitez que la commande de menu apparaisse en mode Code, mais pas sur une page ColdFusion, définissez l'attribut de la façon suivante: showIf="_VIEW_CODE, !_SERVERMODEL_CFML".</li> </ul> <h1 id="contenu-24">Contenu</h1> <p>Aucun (balise vide).</p> <h1 id="contenant-23">Contenant</h1> <p>Cette balise doit être imbriquée dans une balise menu.</p> <h1 id="example-87">Example</h1> <pre><code class="language-xml"><menuitem name="New" key="Cmd+N" enabled="true" command="dw.createDocument()" id="DWMenu_File_New" /> </code></pre> <h1 id="separator-2"><separator></h1> <h1 id="description-87">Description</h1> <p>Indique qu'un séparateur doit apparaître à l'emplacement correspondant du menu.</p> <h1 id="attributes-65">Attributes</h1> <pre><code class="language-txt">{app} </code></pre> <p>app Nom de l'application dans laquelle le séparateur apparait. Non utilisé actuellement.</p> <h1 id="contenu-25">Contenu</h1> <p>Aucun (balise vide).</p> <h1 id="contenant-24">Contenant</h1> <p>Cette balise doit être imbriquée dans une balise menu.</p> <h1 id="example-88">Example</h1> <pre><code class="language-txt"><separator /> </code></pre> <h1 id="shortcutlist"><shortcutlist></h1> <h1 id="description-88">Description</h1> <p>Spécífie une liste de raccourcis dans le fichier menus.xml.</p> <h1 id="attributes-66">Attributes</h1> <pre><code class="language-txt">{app},id,{platform} </code></pre> <p>app Nom de l'application dans laquelle la liste de raccourcis est disponible. Non utilisé actuellement. <br /> - id ID de la liste de raccourcis. Cet ID doit être identique à celui de la barre de menus (ou menu contextual) de Dreamweaver à laquelle les raccourcis sont associés. Les valeurs admises sont les suivantes: "DWMainWindow", "DWMainSite", "DWTimelineContext" et "DWHTMLContext". <br /> ■ platform Indique que la liste de raccourcis ne doit apparaître que sur la plate-forme spécifique. Les valeurs possibles sont : "win" et "mac".</p> <h1 id="contenu-26">Contenu</h1> <p>Une ou plusieurs balises shortcut peuvent être imbriquées dans cette balise. Celle-ci peut également contir une ou plusieurs balises comment (dont la syntaxe est identique à celle des balises comment HTML).</p> <h1 id="contenant-25">Contenant</h1> <p>Néant</p> <h1 id="example-89">Example</h1> <pre><code class="language-txt"><shortcutlist id="DWMainWindow"> <!-- balises shortcut et comment ici --> </shortcutlist> </code></pre> <h1 id="shortcut"><shortcut></h1> <h1 id="description-89">Description</h1> <p>Spcifice un raccourci clavier dans le fichier menus.xml.</p> <h1 id="attributes-67">Attributes</h1> <p>key,{app},{platform},{file},{arguments},{command},id,{name}</p> <p>key Combinaison de touches permettant d'activer le raccourci clavier. Pour plus d'informations sur la syntaxe, voir <menuitem>. <br /> - app Nom de l'application dans laquelle le raccourci est disponible. Non utilisé actuellement. <br /> ■ platform Indique que le raccouci ne fonctionne que sur la plate-forme spécifique. Les valeurs possibles sont : "win" et "mac". Si vous ne définisse pas cet attribut, le raccouci fonctionne sur les deux plates-formes. <br /> file Chemin d'accès au fischier contenant le code JavaScript executé par Dreamweaver lorsque le raccourci clavier est utilisé. L'attribut file prime sur l'attribut command. Vous doivent spécifier l'attribut file ou command pour chaque raccourci. <br /> - arguments Fournit des arguments que Dreamweaver transmet au code dans le fjichier JavaScript indiqué dans l'attribut file. Ces arguments doivent être insérés entre des apostrophes (), à l'intérieur de la chaine des valeurs d'attribut déliminée par les guillemets (). <br /> command Code JavaScript executé par Dreamweaver lorsque le raccourci clavier est utilisé. Spécifiez l'attribut file or command pour chaque raccourci. <br /> - id Identificateur unique d'un raccourci.</p> <p>name Nom de la commande executée par le raccouci clavier, basé sur le modele des noms de commande de menu. Par exemple, l'attribut name du raccouci F12 correspond à "Aperçu dans le navigateur principal".</p> <h1 id="contenu-27">Contenu</h1> <p>Aucun (balise vide).</p> <h1 id="contenant-26">Contenant</h1> <p>Cette balise doit être imbibiquée dans une balise shortcutlist.</p> <h1 id="example-90">Example</h1> <p><shortcut key="Cmd+Shift+Z" file="Menua/MM/Edit_Clipboard.htm" arguments = "redo"' id "DWShortcuts(EditRedo"/></p> <h1 id="tool"><tool></h1> <h1 id="description-90">Description</h1> <p>Cette balise représenté un outil unique et contient tous les raccourcis associés à ce dernier sous la forme de sous-balises, stockées dans le fichier menus.xml.</p> <h1 id="attributes-68">Attributes</h1> <p>{name},id</p> <p>name Version localisede du nom de l'outil. <br /> - id Identificateur d'outil interne qui désigne l'outil auquel s'appliquent les raccourcis.</p> <h1 id="contenu-28">Contenu</h1> <p>Cette balise peut contenir une ou plusieurs balises activate, override ou action.</p> <h1 id="contenant-27">Contenant</h1> <p>Cette balise doit être imbriquée dans une balise menu.</p> <h1 id="example-91">Example</h1> <pre><code class="language-txt"><tool name="Hand tool" id="com.macromedia.dreamweaver.tools_hand"> <!-- balises tool ici--> </tool> </code></pre> <h1 id="action"><action></h1> <h1 id="description-91">Description</h1> <p>Contient la combinaison de touches et le code JavaScript à executer lorsque l'outil est actif et que l'utilisateur compose la combinaison de touches.</p> <h1 id="attributes-69">Attributes</h1> <p>{name},key,command,id</p> <p>name Version localise de l'action. <br /> key Combinaison de touches permettant d'executer l'action. Pour plus d'informations sur la syntaxe, voir <menuitem>. <br /> command Instructions JavaScript à executer. Le format de cet attribut est identique à celui de l'attribut command de < shortcut>. <br /> id Identificateur unique de l'action.</p> <h1 id="contenu-29">Contenu</h1> <p>Aucun (balise vide).</p> <h1 id="contenant-28">Contenant</h1> <p>Cette balise doit être imbibiquée dans une balise tool.</p> <h1 id="example-92">Example</h1> <pre><code class="language-xml"><action name="Set magnification to 50%" key="5" command="dw.activeViewScale = 0.50" id="DWTools_Zoom_50"/> </code></pre> <h1 id="activate"><activate></h1> <h1 id="description-92">Description</h1> <p>Contient la combinaison de touches permettant d'activer l'outil.</p> <h1 id="attributes-70">Attributes</h1> <p>{name},key,id</p> <p>name Version localisede l'action. <br /> key Combinaison de touches permettant d'activer l'outil. Pour plus d'informations sur la syntaxe, voir <menuitem>. <br /> id Identificateur unique de l'action.</p> <h1 id="contenu-30">Contenu</h1> <p>Aucun (balise vide).</p> <h1 id="contenant-29">Contenant</h1> <p>Cette balise doit être imbriquée dans une balise tool.</p> <h1 id="example-93">Example</h1> <p><activate name="Switch to Hand tool" key="H" id="DWTools_Hand_Active1" /></p> <h1 id="override"><override></h1> <h1 id="description-93">Description</h1> <p>Contient la combinaison de touches permettant d'activer temporairement l'outil. S'il exécute un autre outil modal, l'utilisateur peut appuyer sur cette touche et la maintainir enforcée pour basculer d'un outil à l'autre.</p> <h1 id="attributes-71">Attributes</h1> <p>{name},key,id</p> <p>name Version localised de l'action. <br /> key Combinaison de touches permettant d'activer rapidement l'outil. Pour plus d'informations sur la syntaxe, voir <menuitem>. <br /> id Identificateur unique de l'action.</p> <h1 id="contenu-31">Contenu</h1> <p>Aucun (balise vide).</p> <h1 id="contenant-30">Contenant</h1> <p>Cette balise doit être imbriquée dans une balise tool.</p> <h1 id="example-94">Example</h1> <p><override name="Quick switch to Hand tool" key="Space" id="DWTools_Hand_Override" /></p> <h1 id="modification-des-menus-et-commandes-de-menu">Modification des menus et commandes de menu</h1> <p>En modifiant le fjichier menus.xml, vous pouvez déplacer les commandes de menu au sein d'un menu ou d'un menu à un autre. Vous pouvez également ajouter des séparateurs dans les menus ou les supprimer et déplacer des menus au sein d'une barre de menus ou d'une barre de menus à une autre.</p> <p>En outre, vous pouvez ajouter des éléments dans les menus contextuels ou en retirer en appliquant la même procedure que pour les autres menus.</p> <p>Pour plus d'informations, consultez A propos du fichier menus.xml, page 192.</p> <h1 id="pour-déplacer-une-commande-de-menu">Pour déplacer une commande de menu :</h1> <ol> <li>Quittez Dreamweaver. </li> <li>Effectuez une copie de sauvegarde du fichier menus.xml. </li> <li>Ouvrez le fjichier menus.xml dans un éditeur de texte comme BBEdit, HomeSite ou Wordpad (ne l'ouvre pas dans Dreamweaver). </li> <li>Coupez une balise menuitem complète, depuis la chaine <menuitem au début de la chaine jusqu'au caractère /> final. </li> <li>Placez le point d'insertion à l'emplacement requis pour la commande de menu. (Cet emplacement doit se situer entre une balise menu et la balise /menu correspondante.) </li> <li>Collez la commande de menu à son nouvel emplacement.</li> </ol> <h1 id="pour-creer-un-sous-menu-lors-du-déplacement-dune-commande-de-menu">Pour creer un sous-menu lors du déplacement d'une commande de menu :</h1> <ol> <li>Placez le point d'insertion dans un menu (entre une balise menu et la balise /menu correspondante). </li> <li>Insérez une nouvelle balise menu et une balise /menu dans le menu. </li> <li>Ajoutez les nouvelles commandes de menu dans le nouveau sous-menu.</li> </ol> <h1 id="pour-insérer-un-séparateur-entre-deux-commandes-de-menu">Pour insérer un séparateur entre deux commandes de menu :</h1> <p>■ Insérez une balise separator/ entre les deux balises menuitem.</p> <h1 id="pour-supprimer-un-séparateur-existant">Pour supprimer un séparateur existant :</h1> <p>Supprimez la ligne separator/ correspondante.</p> <h1 id="pour-déplacer-un-menu">Pour déplacer un menu :</h1> <ol> <li>Quittez Dreamweaver. </li> <li>Effectuez une copie de sauvegarde du fichier menus.xml. </li> <li>Ouvrez le fichier menus.xml dans un éditeur de texte comme BBEdit, HomeSite ou Wordpad (ne l'ouvre pas dans Dreamweaver). </li> <li>Coupez un menu ainsi que son contenu, depuis la balise d'ouverture menu jusqu'à la balise de fermeture /menu. </li> <li>Placez le point d'insertion au nouvel emplacement du menu (cet emplacement doit se situer entre une balise menubar et la balise /menubar correspondante). </li> <li>Copiez le menu à son nouvel emplacement.</li> </ol> <h1 id="modification-du-nom-dun-menu-ou-dune-commande-de-menu">Modification du nom d'un menu ou d'une commande de menu</h1> <p>Pour modifier le nom d'un menu ou d'une commande de menu, il suffit de modifier le fichier menus.xml.</p> <h1 id="pour-modifier-le-nom-dun-menu-ou-dune-commande-de-menu">Pour modifier le nom d'un menu ou d'une commande de menu :</h1> <ol> <li>Quittez Dreamweaver. </li> <li>Effectuez une copie de sauvegarde du fichier menus.xml. </li> <li>Ouvrez le fjichier menus.xml dans un éditeur de texte comme HomeSite, BBEdit ou Wordpad (ne l'ouvrez pas dans Dreamweaver). </li> <li>Si vous modifiez le nom d'une commande de menu, localisez la balise menuitem adequate, puis modifier les attribut name. Si vous modifier les nom d'un menu, localisez la balise menu adequate, puis modifier les attributname. Dans tous les cas, ne modifier pas l'attribut id. </li> <li>Enregistrez, puis fermez le fichier menus.xml. Relancez Dreamweaver afin que les modifications soient prises en compte.</li> </ol> <h1 id="modification-des-raccourcis-clavier">Modification des raccourcis clavier</h1> <p>Si les raccourcis clavier par défaut ne vous conviennent pas, vous pouvez les modifier, les supprimer ou en creer de nouveaux. Pour ce faire, la solution la plus simple est d'utiliser l'Editeur de raccourcis clavier (pour plus d'informations, voir l'aide de Dreamweaver). Il est également possible de modifier les raccourcis clavier directement dans le fichier menus.xml, mais les risques d'erreur sont plus élevés que si vous utilisez l'Editeur de raccourcis clavier.</p> <h1 id="pour-modifier-un-raccourci-clavier">Pour modifier un raccourci clavier :</h1> <ol> <li>Quittez Dreamweaver. </li> <li>Effectuez une copie de sauvegarde du fichier menus.xml. </li> <li>Ouvrez le fjichier menus.xml dans un éditeur de texte comme BBEdit, HomeSite ou Wordpad (ne l'ouvrez pas dans Dreamweaver). </li> <li>Consultez la matrice des raccourcis clavier (disponible à partir du centre de support de Dreamweaver) et désissez un raccourci non utilisé ou que vous souhaitez réassigner. Si vous réassignez un raccourci clavier, reportez les modifications sur une copie imprimée de la matrice pour vous y reférer ultérieurement. </li> <li> <p>Lorsque vous réassignez un raccourci clavier, localisez la commande de menu à laquelle il renvoie, puis supprimez l'attribut key="shortcut" de cette commande de menu.</p> </li> <li> <p>Localisez la commande de menu à laquelle vous souhaitez assigner ou réassigner le raccourci clavier. </p> </li> <li>Si un raccourci clavier est déjà assigné à cette commande de menu, localisez l'attribut key dans la ligne. Si aucun raccourci ne lui a été assigné, ajoutez l'attribut key=" " parmi les autres attributs au sein de la balise menuitem. </li> <li>Entre les guillemets (") de l'attribut key, saisissez le nouveau raccourci clavier.</li> </ol> <p>Si vous saississez une combinaison de touches, séparez ces dernières par un signe plus (+). Pour plus d'informations sur les modifieurs, voir la description de la balise menuitem dans <menuitem>.</p> <p>Si le raccourci clavier est déjà assigné à une autre commande de menu et que vous n'avez pas supprimé cette assignation, le raccourci ne s'applique qu'à la première commande à laquelle il est associé dans le fichier menus.xml.</p> <h1 id="eae">eae</h1> <p>Vous pouvez utiliser un même raccourci clavier pour une commande de menu Windows et Macintosh.</p> <ol> <li>Saisissez le nouveau raccourci à l'emplacement ajustat de la matrice des raccourcis clavier.</li> </ol> <h1 id="modification-des-menus-déroulants-et-des-menus-contextuels">Modification des menus déroulants et des menus contextuels</h1> <p>Dreamweaver comporte des menus déroulants ou contextuels dans un grand nombre de pannaaux et de boites de dialogue. Certains menus contextuels sont définis dans le fjichier menus.xml. Les autres sont définis dans divers fjichiers XML. Il vous est possible de créé, supprimer ou modifier des éléments de ces menus. Cependant, en règle générale, il est préféable de créé une extension afin d'effectuer ces changements.</p> <p>Les menus déroulants et contextuels de Dreamweaver répertoriés ci-dessous sont définis dans des fichiers XML au moyen de balises identiques à celles du fichier menus.xml :</p> <p>Sources de données (menu dérouulant plus (+) du panneau Liaisons): définies dans les fichiers DataSources.xml situés dans les sous-dossiers du dossier DataSources. <br /> - Comportements de serveur (menu dérouulant plus (+) du panneau Comportements de serveur): définis dans les fichiers ServerBehaviors.xml situés dans les sous-dossiers du dossier ServerBehaviors. <br /> - Formats de serveur (menu dérouulant plus (+) de la boîte de dialogue Modifier la liste de formats): définis dans les fichiers ServerFormats.xml situés dans les sous-dossiers du dossier ServerFormats.</p> <ul> <li>Les éléments du menu déroulant formats qui permettent une liaison dans le panneau Liaisons sont définis dans les fichiers Formats.xml situés dans les sous-dossiers du dossier ServerFormats. Vous pouvez ajouter des entrées à ce menu à partir de Dreamweaver via la boîte de dialogue d'ajout de format. </li> <li>Les commandes de menu de la boîte de dialogue Editeur de la bibliothèque de balises sont définies dans le fichier TagLibraries/TagImporters/TagImporters.xml. </li> <li>Les commandes de menu des paramètres de la boîte de dialogue de génération de comportement, elle-même comprise dans le Créateur de comportements de serveur, sont définies dans le fjichier Shared/Controls/String Menu/Controls.xml. </li> <li>Les commandes des menus contextuels associées aux composants ColdFusion sont définies dans le fichier Components/ColdFusion/CFCs/CFCsMenu.xmL. </li> <li>Les commandes des menus contextuels associées aux sources de données ColdFusion sont définies dans le fjichier Components/ColdFusion/DataSources/DataSourcesMenu.xm. </li> <li>Les commandes des menus contextuels associées aux JavaBeans sont définies dans le fichier Components/Jsp/JavaBeans/JavaBeanMenu.xml. </li> <li>Les commandes des menus contextuels associées aux divers composants de serveur sont définies dans des fichiers XML situés dans les sous-dossiers du dossier Components.</li> </ul> <h1 id="commandes-de-menu">Commandes de menu</h1> <p>Les commandes de menu rendent les menus plus couples et plus dynamiques. A l'instar des commandes ordinaires, les commandes de menu permettent d'exécuter pratiquement n'importe quel type de modification dans le document actif, dans d'autres documents ouverts ou dans tout document HTML situé sur un disque local. L'API des commandes de menu se développpe à partir de l'API des commandes ordinaires pouraccomplir plusieurs tâches liées à l'affichage et à l'appel de la commande à partir du système de menus.</p> <p>Les commandes de menu sont des fichiers HTML référencés dans l'attribut file d'une balise menuitem du filchier menus.xml. La section BODY d'un filchier de commandes de menu peut containir un formulaire HTML acceptant des options pour la commande (par exemple, le tri des éléments d'un tableau et la colonne de referencia du tri). La section HEAD d'un filchier de commandes de menu contient des fonctions JavaScript quitraitent les entrées de formulaire de la section BODY et contrôle les modifications apportées au document de l'utilisateur.</p> <p>Les commandes de menu sont stockées dans le dossier Configuration/Menu du dossier de l'application Dreamweaver.</p> <p>Le tableau ci-dessous recense les fichiers utilisés pour créé une commande de menu.</p> <table><tr><td>Chemin</td><td>Fichier</td><td>Description</td></tr><tr><td>Configuration/Menuis/</td><td>menu.xml</td><td>Contient une liste structurée des barres de menus, menus, commandes de menu, séparateurs,.listes de raccourcis et raccourcis clavier. Modifie ce fichier pour ajouter de nouveaux menus et commandes de menu.</td></tr><tr><td>Configuration/Menuis/</td><td>nom_commande.htm</td><td>Contient les fonctions requises par la commande de menu.</td></tr></table> <h1 id="remarques">REMARQUES</h1> <p>Si vous ajoutez des commandes de menu personnalisées dans Dreamweaver, faites-le au plus haut niveau du dossier Menu ou créez un sous-dossier. Le dossier Macromedia MM est réservé aux commandes de menu fournies avec Dreamweaver.</p> <h1 id="modification-du-menu-commandes">Modification du menu Commandes</h1> <p>Voupeuazajoutercertainstypesdecommandesau menuCommandesetlesrennommer sans avoira modifierle fichier menus.xml.Pourplusd'informationssurlefchier menus.xml,voir Modificationdesmenuset commandedesmenu,page201.</p> <h1 id="remarquee-3">REMARQUEE</h1> <p>Le mot « commande » a deux significations distinctes dans Dreamweaver. Au sens strict du terme, une commande est un type d'extension particulier. Cependant, dans certains contextes, le terme “commande” correspond à “élément de menu”, c'est-à-dire tout élément apparaisant dans un menu Dreamweaver,quelle que soit sa fonction ou son fonctionnement.</p> <p>Pour creer de nouvelles commandes placées automatiquement dans le menu Commandes, utilisez le panneau Historique. Vous pouze également utiliser Extension Manager pour installer de nouvelles extensions, notamment des commandes. Pour plus d'informations, voir l'aide de Dreamweaver.</p> <p>Pour réorganiser les éléments du menu Commandes ou pour déplacer des éléments d'un menu à un autre, il est nécessaire de modifier le fjichier menus.xml.</p> <h1 id="pour-renomer-une-commande-que-vous-avez-créé">Pour renomer une commande que vous avez créé :</h1> <ol> <li>Choisissez Commandes > Modifier la liste des commandes.</li> </ol> <p>Une boîte de dialogue s'affiche, répertioriant toutes les commandes que vous pouvez renomer (les commandes se trouvant dans le menu Commandes par défaut n'apparaissent pas dans cette liste et ne peuvent pas être modifiées de cette manière).</p> <ol> <li>Sélectionnez la commande que vous souhaitez renomer. </li> <li>Indiquez son nouveau nom. </li> <li>Cliquez sur Fermer.</li> </ol> <p>Le nouveau nom apparaît dans le menu Commandes.</p> <h1 id="pour-supprimer-une-commande-que-vous-avez-créé">Pour supprimer une commande que vous avez créé :</h1> <ol> <li>Choisissez Commandes > Modifier la liste des commandes. <br /> Une boîte de dialogue s'affiche, répertioriant toutes les commandes que vous pouvez supprimer (les commandes se trouvant dans le menu Commandes par défaut n'apparaissant pas dans cette liste et ne peuvent pas être supprimées de cette manière). </li> <li>Sélectionnez la commande que vous souhaitez supprimer. </li> <li>Cliquez sur Supprimer, puis confirmez que vous poulez supprimer la commande. La commande est supprimée. La suppression d'une commande n'implique pas seulement la suppression de la commande du menu : le fichier contenant le code de la commande est également supprimé. Cette procédure de suppression doit donc être utilisée avec discernement. Si vous souhaitez supprimer une commande sans supprimer le fichier, localisez le fichier sous Configuration/Commands, puis placez-le dans un autre dossier. </li> <li>Cliquez sur Fermer.</li> </ol> <h1 id="fonctionnement-des-commandes-de-menu">Fonctionnement des commandes de menu</h1> <p>Lorsque l'utilisateur clique sur un menu avec un élément contenant une commande de menu, les événements suivants se produit :</p> <ol> <li>Si l'une des balises menuitem du menu contient l'attribut dynamic, Dreamweaver appelle la fonction getDynamicContent() dans le fichier de commandes de menu associé afin de compléter le menu. </li> <li>Dreamweaver appelle la fonction canAcceptCommand() dans chaque fichier de commandes de menu lié référencé dans le menu pour vérifier si la commande correspond à l'objet selectionné.</li> </ol> <p>Si la fonction canAcceptCommand() renvoie la valeur false, l'objet de menuappeaït grisé.</p> <p>Si la fonction canAcceptCommand() renvoie la valeur true ou si elle n'est pas définie, Dreamweaver appelle la fonction isCommandChecked() pour déterminer si l'objet de menu doit être coché. Si la fonction isCommandChecked() n'est pas définie, aucune coche n'apparait.</p> <ol> <li>Dreamweaver appelle la fonction setMenuText() pour déterminer le texte devant s'afficher dans le menu.</li> </ol> <p>Si la fonction setMenuText() n'est pas définie, Dreamweaver utilise le texte spécifique dans la balise menuitem.</p> <ol> <li>L'utilisateur selectionne un élément dans le menu. </li> <li>Dreamweaver appelle la fonction receiveArguments(), si elle est définie, dans le fjichier de commandes de menu sélectionné afin de permettre à la commande de Traitser tous les arguments transmis depuis l'objet de menu.</li> </ol> <h1 id="remarque-19">REMARQUE</h1> <p>S'il s'agit d'un élément de menu dynamique, l'ID correspondant est le seul argument transmis.</p> <ol> <li>Dreamweaver appelle la fonction commandButtons(), si elle est définie, pour identifier les boutons qui figurent dans la partie droite de la boîte de dialogue Options et le code qui doit être exécuté lorsqu'el'utilisateur clique sur ces boutons. </li> <li>Dreamweaver recherche une balise FORM dans le fichier de commandes de menu.</li> </ol> <p>S'il existe un formulaire, Dreamweaver appelle la fonction windowDimensions() pour déterminer la taille de la boîte de dialogue Options qui contient les éléments BODY du fjichier.</p> <p>Si la fonction windowDimensions() n'est pas définie, Dreamweaver redimensionné automatiquement la boîte de dialogue.</p> <ol> <li>Si la balise BODY du fjichier de commandes de menu contient le gestionnaire onLoad, Dreamweaver exécuté le code associé à ce gestionnaire (qu'une boîte de dialogue soit affichée ou non). Si aucune boîte de dialogue ne s'affiche, les étapes restantes ne sont pas exécutées. </li> <li>L'utilisateur sélectionne des options dans la boîte de dialogue. Dreamweaver exécute les gestionnaires d'évenements associés aux champ du formulaire au fur et à mesure que l'utilisateur les rencontres. </li> <li>L'utilisateur clique sur l'un des boutons définis par la fonction commandButtons(). </li> <li> <p>Dreamweaver execute le code associé au bouton sur lequel l'utilisateur a cliqué.</p> </li> <li> <p>La boîte de dialogue reste affichée jusqu'à ce que l'un des scripts du fidchier de commandes de menu appelle la fonction window.close().</p> </li> </ol> <h1 id="exemple-de-commande-de-menu-simple">Exemple de commande de menu simple</h1> <p>Cet exemple de commande de menu simple explique le fonctionnement des commandes de menu Annuler et Rétabir. La commande de menu Annuler permet à l'utilisateur d'annuler sa dernière modification, la commande Rétabir permet de rétabir une modification précédément annulée au moyen de Annuler.</p> <p>Pour appliquer cet exemple, suivez les étapes ci-après :</p> <ul> <li>Création de commandes de menu <br /> ■ Ecriture du code JavaScript <br /> Enregistrement du fichier de commandes dans le dossier Menu</li> </ul> <h1 id="creation-de-commandes-de-menu">Creation de commandes de menu</h1> <p>Ajoutez les balises de menu HTML suivantes à la fin du fichier menus.xml afin de créé un menu intitulé MonMenu contenant les éléments Annuler et Rétablir.</p> <pre><code class="language-xml"><menu name="MyMenu" id="MyMenu_Edit"> <menu item name="MyUndo" key="Cmd+Z" file="Menu/MyMenu.htm" arguments="undo" id="MyMenu_Edit_Endo"/> <menu item name="MyRedo" key="Cmd+Y" file="Menu/MyMenu.htm" arguments="redo" id="MyMenu_EditRedo"/> </menu> </code></pre> <p>L'attribut key définit les touches des raccourcis clavier que l'utilisateur peut utiliser pour appeler l'objet de menu. L'attribut file indique le nom du filchier de commandes exécuté par Dreamweaver lorsque ce dernier appelle l'objet de menu. La valeur de l'attribut arguments définit les arguments transmis par Dreamweaver lorsque ce dernier appelle la fonction receiveArguments().</p> <p>La figure suivante representa ces éléments de menu :</p> <p><img alt="" src="images/42da5798f58c96951936141b1b68600869b37c33204b75db2785ac47a8aaa181.jpg" /></p> <h1 id="ecriture-du-code-javascript-2">Ecriture du code JavaScript</h1> <p>Lorsque l'utilisateur selectionne Annuler ou Retablir dans le menu MonMenu, Dreamweaver appelle le fjichier de commandes MonMenu.htm spécifique par l'attribut file de la balise menuitem. Créez le fjichier de commandes MonMenu.htm dans le dossier Configuration/ Menu des Dreamweaver et ajoutez les trois fonctions API des commandes de menu (canAcceptCommand(), receiveArguments() et setMenuText()) afin de partager en œuvre la logique associée aux éléments de menu Annuler et Retablir. Les sections ci-dessous décrivent ces fonctions.</p> <h1 id="canacceptcommand-2">canAcceptCommand()</h1> <p>Dreamweaver appelle la fonction canAcceptCommand() pour chaque élément du menu MonMenu afin de déterminer s'il doit être activé ou désactivé. Dans le fjichier MonMenu.htm, la fonction canAcceptCommand() vérifie la valeur de l'argument arguments[0] afin de déterminer si Dreamweavertraite un élément de menu Rétablit ou Annuler. Si l'argument "undo" est défini, la fonction canAcceptCommand() appèle la fonction d'activateur dw.canUndo() et renvoie la valeur renvoyée (true ou false). De même, si l'argument "redo" est défini, la fonction canAcceptCommand() appèle la fonction d'activateur dw.canRedo() et renvoie sa valeur à Dreamweaver. Si la fonction canAcceptCommand() renvoie la valeur false, Dreamweaver grise l'élement de menu pour lequel la fonction a été appelée. L'exemple suivant décrit le code de la fonction</p> <pre><code class="language-javascript">canAcceptCommand(): function canAcceptCommand() { var Selarray; if (arguments.length != 1) return false; var bResult = false; var whatToDo = arguments[0]; if (whatToDo == "undo") { bResult = dw.canUndo(); } else if (whatToDo == "redo") { bResult = dw.canRedo(); } return bResult; </code></pre> <h1 id="receivearguments-2">receiveArguments()</h1> <p>Dreamweaver appelle la fonction receiveArguments() pourTRAiter les arguments définis dans la balise menuitem. Pour les éléments de menu Annuler et Retablir, la fonction receiveArguments() appelle soit la fonction dw.undo(), soit la fonction dw.redo(), selon la valeur de l'argument arguments[0] ("undo" ou "redo" respectivement). La fonction dw.undo() annule la dernierie action effectuee par l'utiliser dans la fenetre de document, la boite de dialogue ou le panneau actif. La fonction dw.redo() rétablit la dernierie opération annulée.</p> <p>Le code de la fonction receiveArguments() ressemble à ceci :</p> <pre><code class="language-javascript">function receiveArguments() { if (arguments.length != 1) return; var whatToDo = arguments[0]; if (whatToDo == "undo") { dw.undo(); } else if (whatToDo == "redo") { dw.redo(); } } </code></pre> <p>Dans cette commande, la fonction receiveArguments()TRAITE les arguments et execute la commande. Des commandes de menu plus complexes peuvent appeler des fonctions differentes pour executer la commande. Par exemple, le code suivant vérifie si le premier argument est "foo"; si c'est le cas, il appelle la fonction doOperationX() et lui transmet le deuxième argument. Si le premier argument est "bar", le code appelle la fonction doOperationY() et lui transmet le第二种 argument. La fonction doOperationX() ou doOperationY() est chargeé de l'exécution de la commande.</p> <p>function receiveArguments(){ if (arguments.length != 2) return; var whatToDo = arguments[0]; if (whatToDo = = "foo"){ doOperationX(args[1]); }else if (whatToDo = = "bar"){ doOperationX(args[1]); } <br /> }</p> <h1 id="setmenutext">setMenuText()</h1> <p>Dreamweaver appelle la fonction setMenuText() pour déterminer le texte de l'objet de menu. Si la fonction setMenuText() n'est pas définie, Dreamweaver utilise le texte spécifique dans l'attribut name de la balise menuitem.</p> <p>La fonction setMenuText() vérifie la valeur de l'argument transmis par Dreamweaver (arguments[0]). Si la valeur de cet argument est "undo", Dreamweaver appelle la fonction dw.getUndoText(); si sa valeur est "redo", Dreamweaver appelle la fonction dw.getRedoText(). La fonction dw.getUndoText() renvoie le texte spécifique l'opération que Dreamweaver doit annuler. Par exemple, si l'utilisateur utilise plusieurs fois la commande Rétablir, la fonction dw.getUndoText() peut renvoyer le texte de menu « Annuler Modifier source ». De même, la fonction dw.getRedoText() renvoie le texte spécifique l'opération que Dreamweaver doit rétabir. Si l'utilisateur utilise plusieurs fois la commande Annuler, la fonction dw.getRedoText() peut renvoyer le texte de menu « Répéter Modifier source »</p> <p>Le code de la fonction setMenuText() ressemble à ceci :</p> <pre><code class="language-javascript">function setMenuText() { if (arguments.length != 1) return ""; var whatToDo = arguments[0]; if (whatToDo == "undo") return dw.getUndoText(); else if (whatToDo == "redo") return dw.getRedoText(); else return ""; } </code></pre> <h1 id="enregistrement-du-fichier-de-commandes-dans-le-dossier-menu">Enregistrement du fichier de commandes dans le dossier Menu</h1> <p>Pourmettre en oeuvre les éléments de menu Annuler et Retablir, vousdezenvez enregistrer le fichier MonMenu.htm dans le dossier Configuration/Menuus de Dreamweaver ou dans un sous-dossier createda cet effet.L'emplacement du fichier doit correspondre a celui que vous avez spécifie dans la balise menuitem. Pour que Dreamweaver puisse l'exploiter, youdevez redemarrer Dreamweaver ou recharger les extensions.Pour plus d'informations sur le rechargement des extensions,voir Rechargeze les extensions.,page 111.</p> <p>Pour executer les commandes de menu, Sélectionnez l'élement de menu lorsqu'il est activé. Dreamweaver appelle alors les fonctions dans le fichier de commandes, comme indiqué dans Fonctionnement des commandes de menu, page 207.</p> <h1 id="exemple-de-menu-dynamique">Exemple de menu dynamique</h1> <p>Cet exemple déscrit la mise en œuvre du sous-menu Aperçu dans le navigateur de Dreamweaver qui permet d'afficher la liste des navigateurs disponibles. Cet exemple déscrit également l'ouverture du fjichier en cours (ou des fjichiers scélectionnés dans le panneau Site) dans le navigateur spécifique par l'utilisateur. Pourmettre en œuvre ce menu dynamique, suivez les étapes ci-dessous :</p> <ul> <li>Création des éléments de menu dynamiques <br /> ■ Ecriture du code JavaScript</li> </ul> <h1 id="creation-des-éléments-de-menu-dynamiques">Creation des éléments de menu dynamiques</h1> <p>Les balises de menu du fichier menus.xml générées ci-dessous définissant le sous-menue Aperçu dans le navigateur du menu Fichier :</p> <menu name = "_Preview in Browser" id = "DWMenu_File_PIB"> <menuitem dynamic name = "No Browsers Selected" file = "Menu/MM/PIB_Dynamic.htm" arguments = "'No Browsers'" id = "DWMenu_File_PIB,默认" /> <separator /> <menuitem name = "_Edit Browser List..." enabled = "true" command = "dw_editBrowserList(" id = "DWMenu_File_PIB_EditBrowserList" /> </menu> <p>La première balise menuitem définit l'objet de menu par défaut Pas de navigateur sélectionné. Cet élément apparait dans le sous-menu si vous n'vez spécifique aucun navigateur pour l'objet Aperçu dans le navigateur dans les Préférences. Si vous avez spécifique Microsoft Internet Explorer, le sous-menu est similaire à l'illustration ci-dessous :</p> <p><img alt="" src="images/2391a2ff05073c23b6d713128154fa57b595325ffcbbc2f50d3b0deac170ce1b.jpg" /></p> <p>L'attribut name du premier élément de menu indique le fichier de commandes PIB_Dynamic.htm. Ce fichier contient les lignes suivantes :</p> <SCRIPT LANGUAGE="javascript" SRC="PIB_Dynamic.js"></SCRIPT> <p>La balise script inclut le code JavaScript du fjichier PIB_Dynamic.js, lequel contient le code JavaScript associé au sous-menu Aperçu dans le navigateur. Il est possible d'enregistrer ce code directement dans le fjichier PIB_Dynamic.htm, mais il est plus utile de l'enregistrer dans un fjichier séparé. Ceci permet en effet d'inclure le même code dans un grand nombre de commandes.</p> <h1 id="ecriture-du-code-javascript-3">Ecriture du code JavaScript</h1> <p>Etant donné que la première balise menuitem contient l'attribut dynamic, Dreamweaver appelle la fonction getDynamicContent() du fjichier PIB_Dynamic.js déscribe dans l'exemple suivant :</p> <pre><code class="language-javascript">function getDynamicContent(itemID) { var browsers = null; var PIB = null; var i; var j=0; browsers = new Array(); PIB = dw.getBrowserList(); for (i=0; i<PIB.length; i=i+2) { browsers[j] = new String(PIB[i]); if (dw.getPrimaryBrowser() == PIB[i+1]) browsers[j] += "\\tF12"; else if (dw.getSecondaryBrowser() == PIB[i+1]) browsers[j] += "\\tCmd+F12"; browsers[j] += ";id=''+escQuotes(PIB[i])+'"; } if (itemID == "DWPopup_PIB 默认") browsers[j] = MENU_strPreviewIn + browsers[j]; j = j+1; } return browsers; </code></pre> <p>La fonction getDynamicContent() appelle la fonction dw.getBrowserList() afin d'obtenir un tableau des noms de navigateurs indiqués dans la section Aperçu dans le navigateur des Préférences de Dreamweaver. Ce tableau contient les noms de tous les navigateurs et les chemins d'accès aux fichiers exécutables. Ensuite, pour chaque éléments du tableau (i=0; i<PIB.length; i=i+2), la fonction getDynamicContents() place le nom du navigateur (PIB[i]) dans un second tableau appelé browsers (browsers[j] = new String(PIB[i])); Si un navigateur a été désigné comme navigateur principal ou secondaire, la fonction ajoute les noms des raccourcis clavier qui permettent de l'appeler. La chaine ':id=' est ensuite ajoutée, suivie du nom du navigateur entre apostrophes (exemple : ;id='iexplore'). Si l'argument itemID est "DWPopup_PIB 默认", la fonction fait précéder l'élement du tableau de la chaine Preview in. Une fois qu'une entrée a été créé pour chaque navigateur répertorié dans Préférences, la fonction getDynamicContent() renvoie les navigateurs du tableau vers Dreamweaver. Si vous n'avez sélectionné aucun navigateur dans Préférences, la fonction rengoie la valeur null et Dreamweaver affiche Pas de navigateur sélectionné dans le menu.</p> <p><h1 id="canacceptcommand-3">canAcceptCommand()</h1></p> <p>Dreamweaver appelle ensuite la fonction canAcceptCommand() pour chaque balise menuitem faisant referrer à un fisier de commandes avec l'attribut file. Si la fonction canAcceptCommand() renvoie la valeur false, l'objet de menu s'affiche en grise. Si la fonction canAcceptCommand() renvoie la valeur true, Dreamweaver active l'objet de menu. Si la fonction renvoie true ou si elle n'est pas définie, Dreamweaver appelle la fonction isCommandChecked() pour déterminer si l'objet de menu doit être coché. Si la fonction isCommandChecked() n'est pas définie, aucune coche n'apparait.</p> <pre><code class="language-javascript">function canAcceptCommand() { var PIB = dw.getBrowserList(); if (arguments[0] == 'primary' || arguments[0] == 'secondary') return havePreviewTarget(); return havePreviewTarget() && (PIB.length > 0); } </code></pre> <p>La fonction canAcceptCommand() du filchier PIB_Dynamic.js récuple à nouveau la liste des navigateurs créé dans Préférences. Elle vérifie ensuite si le premier argument (arguments[0]) est principal ou secondaire. Si tel est le cas, elle renvoie la valeur renvoyée par la fonction havePreviewTarget(). Dans le cas contraire, elle effectue des tests afin de vérifier l'appel de la fonction havePreviewTarget() et de voir si des navigateurs ont été spécifiés ou non (PIB.length > 0). Si les deux tests sont vrais (true), la fonction renvoie la valeur true. Si au moins un test est faux (false), la fonction renvoie la valeur false.</p> <h1 id="havepreviewtarget">havePreviewTarget()</h1> <p>La fonction havePreviewTarget() est définie par l'utilisateur et renvoie la valeur true si Dreamweaver dispose d'une cible valide à afficher dans le navigateur. Ce peut être un document ou un groupe de fichiers sélectionné dans le panneau Site. La fonction</p> <p>havePreviewTarget() ressemble à l'exemple ci-dessous :</p> <pre><code class="language-javascript">function havePreviewTarget() { var bHavePreviewTarget = false; if (dw.getFocus(true) == 'site') { if (site.getFocus() == 'remote') { bHavePreviewTarget = site.getRemoteSelection().length > 0 && site.canBrowseDocument(); } } else if (site.getFocus() != 'none') { var selFiles = site.getSelectedLocation(); } if (selFiles.length > 0) { var i; bHavePreviewTarget = true; for (i = 0; i < selFiles.length; i++) { var selFile = selFiles[i]; // Pour les connexions à un serveur, les fichiers // seront début des URL distances. } if (selFile.indexOf('/:/')) == (-1)) { var urlPrefix = "file:///"; var strTemp = selFile.substring(urlPrefix.length); if (selFile.indexOf(urlPrefix) == -1) bHavePreviewTarget = false; else if (strTemp.indexOf("\\") == -1) bHavePreviewTarget = false; else if (!DWfile_exists(selFile)) bHavePreviewTarget = false; else if (DWfileaselAttributes(selFile).indexOf("D") != -1) bHavePreviewTarget = false; } } else </code></pre> <p>{ bHavePreviewTarget = true; } 1 } } else if (dw.getFocus() = = 'document'|dw.getFocus() = = 'TextView'|dw.getFocus("true") = = 'html') { var dom = dw.getDocumentDOM('document'); if (dom != null) { var parseMode = dom.getParseMode(); if (parseMode = = 'html'|| parseMode = = 'xml') bHavePreviewTarget = true; } } return bHavePreviewTarget;</p> <p>La fonction havePreviewTarget() règla valeur bHavePreviewTarget sur false comme valeur renvoyée par défaut. Cette fonction effectue deux tests de base en appelant la fonction dw.getFocus() pour déterminer qu'elle partie de l'application est active. Lors du premier test, elle vérifie que le panneau Site est actif (if (dw.getFocus(true) == 'site')). Si ce n'est pas le cas, elle vérifie, lors du second test, si un document (dw.getFocus() == 'document'), le mode Texte (dw.getFocus() == ' TextView') ou l'inspecteur de code (dw.getFocus("true") == 'html') est actif. Si aucun test n'est vrai (true), la fonction renvoie la valeur false.</p> <p>Si le panneau Site est actif, la fonction vérifie si l'affichage est définir sur distant. Si c'est le cas, la fonction définit bHavePreviewTarget sur true, s'il existe des fischiers distants (site.getRemoteSelection().length > 0) et que vous pouvez les ouvrir dans un navigateur (site.canBrowseDocument()). Si l'affichage n'est pas distant, et s'il n'est pas définir sur Aucun, la fonction obtient une liste des fischiers sélectionnés (var selfFiles = site.getSelected(),); ) sous la forme d'URL file:///..</p> <p>La fonction effectue un test sur chaque élément de la liste afin de vérifier si la chaine de caractères</p> <p>"://" y figure. Si ce n'est pas le cas, le code effectue une série de tests sur l'objet de la liste. Si l'objet ne se présente pas sous la forme d'une URL file: // (if</p> <p>(se1File.indexOf(urlPrefix) == -1)), la valeur renvoyée est false. Si le reste de la chaîne apparaissant après le préfixé file: // ne contient pas de barre oblique (/) (if (strTemp.indexOf("/") == -1)), la valeur renvoyée est définie sur false. Si le fjichier n'exist pas (else if (!DWfile_exists(se1File))), la valeur renvoyée est définie sur false. Enfin, la fonction vérifie si le fjichier spécifique est un dossier (else if</p> <p>(DWfile.getAttributes(selFile).indexOf("D") != -1)). Si self file est un dossier, la fonction renvoie la valeur false. Autrement, si la cible est un fichier, la fonction définit bHavePreviewTarget sur la valeur true.</p> <p>Si un document, le mode Texte ou l'inspecteur de code est actif (else if (dw.getFocus() == 'document' || dw.getFocus() == 'TextView' || dw.getFocus("true") == 'html')), la fonction obtient le DOM et vérifie s'il s'agit d'un document HTML ou XML. Si tel est le cas, la fonction définit bHavePreviewTarget sur true. Enfin, la fonction renvoie la valeur stockée dans bHavePreviewTarget.</p> <h1 id="receivearguments-3">receiveArguments()</h1> <p>Dreamweaver appelle la fonction receiveArguments() pour que la commandeTRAITE tous les arguments provenant de I'elément de menu. En ce qui concerne le menu Aperçu dans le navigateur, la fonction receiveArguments() appelle le navigateur selectionné par l'utilisateur. La fonction receiveArguments() ressemble à ceci :</p> <p>function receiveArguments() <br /> { var whichBrowser = arguments[0]; var theBrowser = null; var i=0; var browserList = null; var result = false; if (havePreviewTarget()) { // Code pour vérifier si l'appei provient d'un raccourci clavier if (whichBrowser = = 'primary'||whichBrowser = = 'secondary') { // pour obtenir le chemin du navigateur selectionné if (whichBrowser = = 'primary') { theBrowser = dw.getPrimaryBrowser(); } else if (whichBrowser = = 'secondary')</p> <p>{ theBrowser = dw.getSecondaryBrowser(); } //Faire correspondre le chemin au nom du navigateur correspondant // qui apparait dans le menu browserList = dw.getBrowserList(); while(i< browserList.length) { if browserList[i+1] = = theBrowser) theBrowser = browserList[i]; i + = 2 . 1 else theBrowser = whichBrowser; //Lancer le navigateur uniquement si un navigateur valide est selectionné. if (theBrowser != "file:///" &&typeof(theBrowser) != "undefined" && theBrowser.length>0) { if (dw.getFocus(true) = = 'site') { //Obtenir uniquement le premier élément de la selection car // browseDocument() ne peut prendre en charge un tableau. //dw.browseDocument site.getSelected()[O],theBrowser); site.browseDocument(theBrowser); } else dw.browseDocument(dw.getDocumentPath('document'),theBrowser); } else { // Dans le cas contraire, un utiliser a appuyé sur F12 ou Ctrl+F12,demander s'il souhaite //indiquer maintainant un navigateur primaire ou secondaire. if (whichBrowser = = 'primary') { result = window.confirm(MSG_NoPrimaryBrowserDefined); } else if (whichBrowser = = 'secondary') { result = window.confirm(MSG_NoSecondaryBrowserDefined); } //Si l'utilisateur a cliqué sur OK,les préférences s'affichent avec le panneau du navigateur if(result) dw.showPreferencesDialog('browsers');</p> <pre><code class="language-txt">} </code></pre> <p>La fonction commence par régler la variable whichBrowser sur la valeur transmise par Dreamweaver, arguments[0]. Outre la définition d'autres valeurs par défaut, la fonction règle également le rengoit sur la valeur par défaut, false.</p> <p>Une fois les variables initiaises, la fonction receiveArguments() appelle la fonction définie par l'utilisateur havePreviewTarget() et teste le résultat. Si le résultat du test est vra (true), la fonction vérifie si l'utilisateur a selectionné le navigator principal ou secondaire. Dans ce cas, la fonction définit la variable theBrowser sur le chemin du fjichier exécutable qui lance le navigator (dw.getPrimaryBrowser() ou dw.getSecondaryBrowser()). La fonction effectue ensuite une boucle qui examine la liste des navigateurs renvoyée par dw.getBrowsersList(). Si le chemin vers un navigator de la liste correspond au chemin vers le navigator principal ou secondaire, la fonction définit la variable theBrowser sur la valeur de correspondence dans browserList. La valeur contient le nom du navigator et le chemin vers le fjichier exécutable qui lance le navigator. Si havePreviewTarget() renvoie la valeur false, la fonction définit la variable theBrowser sur la valeur de la variable whichBrowser.</p> <p>La fonction receiveArguments() teste ensuite la variable theBrowser pour vérifier qu'elle ne débute pas par un chemin, qu'elle n'est pas "non définie" ("undefined") et que sa taille est supérieure à 0. Si toutes ces conditions sont remplies et que le panneau Site est actif, la fonction receiveArguments() appelle la fonction site.browseDocument() pour qu'elle ouvre dans le navigateur sélectionné les fichiers sélectionnés dans le panneau Site. Si le panneau Site n'est pas actif, la fonction receiveArguments() appelle la fonction dw.browseDocument() et lui transmet le chemin du document actif et la valeur de la variable theBrowser, qui spécifie le nom du navigateur à utiliser pour afficher le document.</p> <p>Si l'utilisateur a appuyé sur des touches de raccourci (F12 ou Ctrl+F12) et qu'aucun navigateur principal ou secondaire n'a été spécifique, une boîte de dialogue s'affiche pour l'avertir. Si l'utilisateur clique sur OK, la fonction appelle la fonction dw.showPreferencesDialog() avec l'argument browsers pour que l'utilisateur puisse spécifique un navigateur à ce stade.</p> <h1 id="api-des-commandes-de-menu">API des commandes de menu</h1> <p>Les fonctions personalisées de l'API des commandes de menu ne sont pas obligatoires.</p> <h1 id="canacceptcommand-4">canAcceptCommand()</h1> <h1 id="description-94">Description</h1> <p>Determine si I'elément de menu doit etre actif ou grise.</p> <h1 id="arguments-12">Arguments</h1> <p>{arg1},{arg2},...{argN}</p> <ul> <li>S'il s'agit d'une option de menu dynamique, l'ID unique correspondant spécifique dans la fonction getDynamicContents() est le seul argument transmis. Si l'attribut arguments est défini pour une balise menuitem, la valeur de l'attribut est transmise à la fonction canAcceptCommand() (et aux fonctions isCommandChecked(), receiveArguments() et setMenuText()) sous forme d'un ou plusieurs arguments. L'attribut arguments permet de désigner deux éléments de menu appelant la même commande de menu.</li> </ul> <p>REMARQUE</p> <p>L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.</p> <h1 id="valeurs-renvoyées-10">Valeurs renvoyées</h1> <p>Dreamweaver attend une valeur booléenne: true si l'élement doit être activé; false dans le cas contraire.</p> <h1 id="commandbuttons-2">commandButtons()</h1> <h1 id="description-95">Description</h1> <p>Définit les boutons figurant dans la partie droite de la boîte de dialogue Options et leur comportement lorsque l'utilisateur clique dessus. Si cette fonction n'est pas définie, aucun bouton n'apparaît et la section BODY du filchier de commandes de menu s'étend de façon à replir la totalité de la boîte de dialogue.</p> <h1 id="arguments-13">Arguments</h1> <p>Aucun.</p> <h1 id="valeurs-renvoyées-11">Valeurs renvoyées</h1> <p>Dreamweaver attend un tableau contenant un nombre pair d'éléments. Le premier élément est une châne contenant le libellé du premier bouton. Le deuxième élément est une châne de code JavaScript définitant le comportement du premier bouton lorsqu'elutilisateur clique dessus. Les autres éléments définitissant les boutons supplémentaires de la même manière.</p> <h1 id="example-95">Example</h1> <p>Dans l'exemple suivant, la fonction commandButtons() définit les boutons OK, Annuler et Aide.</p> <pre><code class="language-javascript">function commandButtons(){ return new Array("OK","doCommand()","Cancel","window.close()”,"Help","showHelp())”; } </code></pre> <h1 id="getdynamiccontent">getDynamicContent()</h1> <h1 id="description-96">Description</h1> <p>Extrait le content de la partie dynamique du menu.</p> <h1 id="arguments-14">Arguments</h1> <p>menuID</p> <p>L'argument menuID est la valeur de l'attribut id dans la balise menuitem associée à l'élement de menu.</p> <h1 id="valeurs-renvoyées-12">Valeurs renvoyées</h1> <p>Dreamweaver attend un tableau de chaînes, où chaque chaîne contient le nom d'un élément de menu et son ID unique, séparés par un point-virgule. Si cette fonction renvoie la valeur null, aucune modification n'est apportée au menu.</p> <h1 id="example-96">Example</h1> <p>Dans l'exemple suivant, la fonction getDynamicContent() renvoie un tableau de quatre éléments de menu (Mon élément de menu 1, Mon élément de menu 2, Mon élément de menu 3, Mon élément de menu 4):</p> <p>function getDynamicContent(){ var stringArray new Array(); var i=0; var numItems = 4 for (i = 0 :i<numItems;i++) stringArray[i] new String("My Menu Item " + i + ";id My-MenuItem" ^+ i ^+ "); return stringArray; }</p> <p><h1 id="iscommandchecked">isCommandChecked()</h1></p> <h1 id="description-97">Description</h1> <p>Déterminé si une coche doit apparaître à côté de l'objet de menu.</p> <h1 id="arguments-15">Arguments</h1> <pre><code class="language-txt">{arg1}, {arg2},...{argN} </code></pre> <ul> <li>S'il s'agit d'une option de menu dynamique, l'ID unique correspondant spécifique dans la fonction getDynamicContents() est le seul argument transmis. Si l'attribut arguments est défini pour une balise menuitem, la valeur de l'attribut est transmise à la fonction isCommandChecked() (et aux fonctions canAcceptCommand(), receiveArguments() et setMenuText()) sous forme d'un ou de plusieurs arguments. L'attribut arguments permet de désigner deux éléments de menu appelant la même commande de menu.</li> </ul> <p>REMARQUE</p> <p>L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.</p> <h1 id="valeurs-renvoyées-13">Valeurs renvoyées</h1> <p>Dreamweaver attend une valeur booléenne : true si une coche doit apparaître à côté de l'option de menu ; false dans le cas contraire.</p> <h1 id="example-97">Example</h1> <p>function isCommandChecked() <br /> { var bChecked = false; var cssStyle = arguments[0]; if (dw.getDocumentDOM( null) return false; if (cssStyle = = "None") { return dw.cssStylePalette.getSelectedStyle( = ); } else { return dw.cssStylePalette.getSelectedStyle( = cssStyle; } return bChecked;</p> <h1 id="receivearguments-4">receiveArguments()</h1> <h1 id="description-98">Description</h1> <p>Traite tous les arguments transmis à partir d'un élément du menu ou de la fonction dw.runCommand(). S'il s'agit d'une option de menu dynamique, elleTRAITE l'ID de l'options de menu dynamique.</p> <h1 id="arguments-16">Arguments</h1> <p>{arg1}, {arg2},...{argN}</p> <ul> <li>S'il s'agit d'une option de menu dynamique, l'ID unique correspondant spécifique dans la fonction getDynamicContents() est le seul argument transmis. Si l'attribut arguments est défini pour une balise menuitem, la valeur de l'attribut est transmise à la fonction receiveArguments() (et aux fonctions canAcceptCommand(), isCommandChecked() et setMenuText()) sous forme d'un ou de plusieurs arguments. L'attribut arguments permet de désigner deux éléments de menu appelant la même commande de menu.</li> </ul> <p>REMARQUE</p> <p>L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.</p> <h1 id="valeurs-renvoyées-14">Valeurs renvoyées</h1> <p>Dreamweaver n'attend rien.</p> <h1 id="example-98">Example</h1> <pre><code class="language-javascript">function receiveArguments() { var styleName = arguments[0]; if (styleName == ""None)) dw.getDocumentDOM('document').applyCSSStyle(['',')); else dw.getDocumentDOM('document').applyCSSStyle(['',styleName]); } </code></pre> <h1 id="setmenutext-2">setMenuText()</h1> <h1 id="description-99">Description</h1> <p>Sécicité le texte devant s'afficher dans le menu.</p> <p>N'utilisez pas cette fonction si vous utilisez getDynamicContent().</p> <h1 id="arguments-17">Arguments</h1> <p>{arg1}, {arg2},...{argN}</p> <ul> <li>Si l'attribut arguments est défini pour une balise menuitem, la valeur de cet attribut est transmise à la fonction setMenuText() (et aux fonctions canAcceptCommand(), isCommandChecked() et receiveArguments()) sous la forme d'un ou de plusieurs arguments. L'attribut arguments permet de désigner deux éléments de menu appelant la même commande de menu.</li> </ul> <h1 id="valeurs-renvoyées-15">Valeurs renvoyées</h1> <p>Dreamweaver attend la chaine devant apparaitre dans le menu.</p> <h1 id="example-99">Example</h1> <pre><code class="language-javascript">windowfunction setMenuText() { if (arguments.length != 1) return ""; var whatToDo = arguments[0]; if (whatToDo == "undo") return dw.getUndoText(); else if (whatToDo == "redo") return dw.getRedoText(); else return ""; } </code></pre> <h1 id="dimensions">Dimensions()</h1> <h1 id="description-100">Description</h1> <p>Définit les dimensions de la boîte de dialogue des paramètres. Si cette fonction n'est pas définie, les dimensions de la fenêtre sont calculées automatiquement.</p> <p>Ne définisse cette fonction que si vous souhaitez utiliser une boîte de dialogue supérieure à 640 x 480 pixels.</p> <h1 id="arguments-18">Arguments</h1> <p>platform</p> <p>La valeur de l'argument platform est soit "macintosh", soit "windows", selon la plate-forme utilisé par l'utilisateur.</p> <h1 id="valeurs-renvoyées-16">Valeurs renvoyées</h1> <p>Dreamweaver attend une chaîne au format "widthInPixels, heightInPixels".</p> <p>Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone des boutons OK et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaitre toutes les options, des barres de défilament s'affichent.</p> <h1 id="example-100">Example</h1> <p>Dans l'exemple suivant, la fonction windowDimensions() définit les dimensions de la boîte de dialogue des paramètres à 648 x 520 pixels :</p> <pre><code class="language-javascript">functionwindowDimensions(){ return"648,520"; 1 </code></pre> <p>Pour creer une nouvelle barre d'outils dans Macromedia Dreamweaver 8, il suffit de creer un fichier de definition de(barre d'outils et de placer ce fichier dans le dossier Configuration/ Toolbars. Dans ce fichier de barre d'outils, vous définissez, à l'aide de quelques balises XML personnalises, des éléments tels que des boutons-poussoir, des boutons radio, des zones de texte et des menus déroulants. Ensuite, vous attribuez des attributs et des commandes à ces éléments pour définir leur aspect et leur comportement, et pouvez ajouter d'autres fichiers de barre d'outils et des éléments de referencia définis dans d'autres barres d'outils.</p> <p>Le tableau ci-dessous recense les fichiers utilisés pour créé une barde d'outils :</p> <table><tr><td>Chemin</td><td>Fichier</td><td>Description</td></tr><tr><td>Configuration/Toolbars/</td><td>toolbars.xml</td><td>Modifiez ce fichier pour changer le contenu de la barre d'outils.</td></tr><tr><td>Configuration/Toolbars/</td><td>nouvelle_barre_outils.xml</td><td>Créez ce fichier pour générer une barre d'outils.</td></tr><tr><td>Configuration/Toolbars/</td><td>fichier_image.gif</td><td>Image d'icone associée à l'élement de barre d'outils.</td></tr><tr><td>Configuration/Commands/</td><td>MyCommand.htm</td><td>Fichier de commandes associé à l'élement de barre d'outils.</td></tr></table> <h1 id="fonctionnement-des-barres-doutils">Fonctionnement des barres d'outils</h1> <p>Les barres d'outils sont définies par les fichiers XML et d'image localisés dans le dossier Toolbars du dossier de configuration principal de Dreamweaver. Les barres d'outils par défaut de Dreamweaver sont stockées dans le:fichier toolbars.xml du dossier Configuration/Toolbars. Au démarrage, Dreamweaver charge tous les fichiers de(barre d'outils dans le dossier Toolbars. Pour ajouter une nouvelle barre d'outils, vous pouvez simplement copier le:fichier correspondant dans le dossier Toolbars, plott que de modifier le:fichier toolbars.xml original.</p> <p>Les fichiers XML de(barre d'outils définissant une ou plusieurs barres d'outils, ainsi que les éléments qui les composent. Une barre d'outils est une liste d'éléments tels que des boutons, des zones de texte, des menus déroulants, etc. Un élément de barre d'outils est un contrôle auquel l'utilisateur peut acceder.</p> <p>Certain types de contrôle de barre d'outils, tels que les boutons-poussoirs et les menus déroulants, sont associés à une icône. Les icones sont stockées dans le sous-dossier images du dossier Toolbars. Elles sont généralement au format de filchier GIF ou JPEG, mais tous les formats compatibles avec Dreamweaver sont acceptés. Les images pour les barres d'outils créées dans Macromedia sont stockées dans le dossier Toolbars/images/MM.</p> <p>Tout comme pour les menus, vous pouvez spécifier la fonction de chaque élément de la barre d'outils en définitissant ses attributs ou par l'intémédiaire d'un fichier de commandes. Les fichiers de commandes des barres d'outils créées dans Macromedia sont stockés dans le dossier Toolbars/MM.</p> <h1 id="cnso">CNSO</h1> <p>L'API de barre d'outils est compatible avec l'API de commandes de menu. Les contrôleles de barre d'outils peuvent ainsi réutiliser les fichiers de commandes des menus.</p> <p>Contrairement aux menus, les éléments de barre d'outils peuvent être définis indépendamment des barres d'outils qui les utilisent. Vous pouvez ainsi utiliser des éléments de barre d'outils dans plusieurs barres d'outils en appliquant la balise itemref.</p> <p>Lorsque Dreamweaver charge une barre d'outils pour la première fois, sa visibilité et sa position sont déterminées par le filchier de définition de la barre d'outils. Par la suite, sa visibilité et sa position sont enregistrées et restaurées à partir du registre (Windows) ou du filchier de préférences Dreamweaver (Macintosh).</p> <h1 id="comportement-des-barres-doutils">Comportement des barres d'outils</h1> <p>Sous Windows, les barres d'outils Dreamweaver se comportent, en général, comme les barres d'outils standard du système. Les barres d'outils Dreamweaver présente toute fois les caractéristiques suivantes :</p> <ul> <li>Vous pouze les ancreer, les detacher et les repositionner par rapport aux autres barres d'outils en utilisant la fonction de glisser-deposer. </li> <li>Vous pouze les ancrer horizontally sur le bord supérieur ou inférieur la fenetre. Dans l'espace de travail de Dreamweaver, qui intègre toutes les fenêtes de documents de Dreamweaver dans un unique cadre parent, vous pouze spécifique si les barres d'outils doivent s'ancrer à l'espace de travail ou à la fenetre de document.</li> </ul> <p>Les barres d'outils ancrees à l'espace de travail de Dreamweaver n'apparaissent qu'une seule fois. Elles fonctionnent toujours sur le document au premier plan. Dans l'espace de travail de Dreamweaver, vous pouvez ancre les barres d'outils au-dessus, en dessous, à gauche ou à droite de la barre Insérer. Les barres d'outils ancrees à l'espace de travail de Dreamweaver ne sont pas automatiquement désactivées lorsque la fenêtre de document est fermée. Les éléments de la barre d'outils déterminent s'ils doivent rester actifs lorsque chaque document n'est ouvert.</p> <p>Lorsque les barres d'outils sont ancrees sur la fenetre de document, une instance s'affichera pour chaque fenetre. La barre d'outils attachee à une fenetre de document est désactivée lorsque la fenetre dans laquelle elle est ancree n'est pas la fenetre active. Les gestionnaires de mise à jour sont exécutés des que leur fenetre devient la fenetre active.</p> <p>Vou ne pouvez pas faire glisser les barres d'outils entre la fenêtre de document et l'espace de travail de Dreamweaver.</p> <ul> <li>La taille des barres d'outils ne change pas. La taille d'une barre d'etat ne se réduit pas lorsque le conteneur est réduit ou lorsque d'autres barres d'outils sont ajoutées. </li> <li>Vous pouvez afficher ou masquer les barres d'outils à partir du menu Affichage > Barres d'outils. </li> <li>Les barres d'outils ne peuvent pas se chevaucher. <br /> Lorsque vous faites glisser une barre d'outils, seul son contour s'affiche.</li> </ul> <p>Sur Macintosh, les barres d'outils sont toujours attachées à la fenêtre de document. Vous pouvez les afficher ou les masquer à partir du menu, mais vous ne pouvez pas les faire glisser, les réorganiser ni les détacher.</p> <h1 id="fonctionnement-des-commandes-de-barres-doutils">Fonctionnement des commandes de barres d'outils</h1> <p>Lorsque Dreamweaver dessine une barre d'outils, les événements suivants se produit :</p> <ol> <li>Pour chaque élément de contrôle de la barre d'outils, Dreamweaver détermine si l'attribut file existe. </li> <li>Si l'attribut file existe, Dreamweaver appelle la fonction canAcceptCommand() pour définiir si le contrôle doit être activé dans le contexte actué du document.</li> </ol> <p>Par exemple, dans la zone de texte Titre du document de la barre d'outils de Dreamweaver, la fonction canAcceptCommand() vérifie l'existence d'un DOM et si le document actif est un fisier HTML. Si ces deux conditions sont vérifiées, la fonction renvoie la valeur true et Dreamweaver active la zone de texte dans la barre d'outils.</p> <ol> <li> <p>Si l'attribut file existe, Dreamweaver ignore les attributs suivants, s'ils sont spécifiques : checked, command, DOMRequired, enabled, script, showif, update et value.</p> </li> <li> <p>Si l'attribut file n'este pas, DreamweaverTRAITE les attributs definis pour I'elemen de controle de la barre d'outils : checked, command, DomRequired, etc.</p> </li> </ol> <p>Pour plus d'informations sur les attributs de balises d' éléments spécifique, voir Attributes de balises d' éléments, page 244.</p> <ol> <li>Dreamweaver appelle la fonction getCurrentValue() à chaque cycle de mise à jour, comme spécifique par l'attribut update, pour déterminer la valeur de contrôle à afficher. </li> <li>L'utilisateur selectionne un élément dans la barre d'outils. </li> <li>Dreamweaverappelle la fonction receiveArguments() pour Traits les arguments spécifiés par l'attribut arguments de l'élement de la barre d'outils.</li> </ol> <p>Pour plus d'informations sur le role des fonctions spécifiques dans l'API de commande de barre d'outils, voir API de commande de la barre d'outils, page 251.</p> <h1 id="fichier-de-commandes-de-barre-doutils-simple">Fichier de commandes de barre d'outils simple</h1> <p>Cet exemple simple implémente un élément de zone de texte Titre comme indiqué sur la barre d'outils Document de Dreamweaver. L'élement de zone de texte permet à l'utilisateur d'entrée un nom pour le document Dreamweaver en cours. Procedez comme suit pour implémenter cet exemple de barre d'outils :</p> <ul> <li>Création de la zone de texte <br /> ■ Ecriture du code JavaScript</li> </ul> <h1 id="création-de-la-zone-de-texte">Création de la zone de texte</h1> <p>Pour ajouter une barre d'outils dans Dreamweaver, vous placez le fjichier XML contenant la définition de barre d'outils dans le dossier Configuration de Dreamweaver.</p> <p>L'illustration suivantepresentelazone de texteTitre:</p> <p>Titre :</p> <p>Document sans nom</p> <p><img alt="" src="images/83dc7a670246c010e3f986fece5667f11e23c18551e52de0327edde75a48903c.jpg" /></p> <p>L'objet de barre d'outils editcontrol suivant définit une zone de texte nommée Titre :</p> <pre><code class="language-xml"><EDITCONTROL ID="DW_SetTitle" label="Title:" toolkitip="Document Title" width="150" file="Toolbars/MM/EditTitle.htm"/> </code></pre> <p>L'attribut tooltip entraine l'affichage dans Dreamweaver de la mention Titre du document dans une info-bulle lorsque l'utilisteur positionne le curseur sur la zone de texte. L'attribut width définit la taille du champ en pixels. L'attribut file précise que le fischier EditTitle.htm contient les fonctions JavaScript qui agissant sur la zone de texte. Pour voir la définition complete de la barre d'outils Document de Dreamweaver, reportez-vous à la barre d'outils principale (id="DW_Toolbar(Main") dans le fischier toolbars.xml.</p> <h1 id="ecriture-du-code-javascript-4">Ecriture du code JavaScript</h1> <p>Lorsque l'utilisateur agit sur la zone de texte, Dreamweaver invoque le fisquier de commandes EditTitle.htm dans le dossier Toolbars/MM. Ce fisquier contient trois fonctions JavaScript qui agissant sur la zone de texte Titre. Ces fonctions sont : canAcceptCommand(),</p> <p>receiveArguments() et getCurrentValue().</p> <h1 id="canacceptcommand-active-lélement-de-la-barre-doutils">canAcceptCommand(): active l'élement de la barre d'outils</h1> <p>La fonction canAcceptCommand() se compose d'une ligne de code qui s'assure qu'un DOM (modèle d'objet de document) est disponible et que le document est analysé comme HTML.</p> <p>La fonction renvoie le résultat de ces tests. Si les conditions renvoient la valeur true,</p> <p>Dreamweaver active l'objet de zone de texte sur la barre d'outils. Si la fonction renvoie la valeur false, Dreamweaver désactive l'objet.</p> <p>La fonction se presente comme suit :</p> <pre><code class="language-javascript">function canAcceptCommand() { return (dw.getDocumentDOM() != null && dw.getDocumentDOM().getParseMode() == 'html'); } </code></pre> <h1 id="receivearguments-recherche-le-titre">receiveArguments(): recherche le titre</h1> <p>Dreamweaver appelle la fonction receiveArguments(), générée dans l'exemple suivant, lorsque l'utilisateur entre une valeur dans la zone de texte Titre du document et appuie sur la touche Entrée, ou selectionne une autre commande.</p> <p>La fonction se presente comme suit :</p> <pre><code class="language-javascript">function receiveArguments(newTitle) { var dom = dw.getDocumentDOM(); if (dom) dom.setTitle(newTitle); } </code></pre> <p>Dreamweaver transmet newVal, à savoir la valeur entree par l'utiliseur, à la fonction receiveArguments(). La fonction receiveArguments() vérifie immediatement s'il existe un DOM. Si c'est le cas, la fonction receiveArguments() définit le titre du nouveau document en transmettant newVal à la fonction dom.setTitel().</p> <h1 id="getcurrentvalue-recherche-le-titre">getCurrentValue(): recherche le titre</h1> <p>Lorsqu'un cycle de mise à jour survient, selon la fréquence par défaut déterminée dans le gestionnaire d'événements onEdit, Dreamweaver appelle la fonction getCurrentValue() pour déterminer la valeur à afficher pour le contrôle. La fréquence de mise à jour par défaut du gestionnaire d'événements onEdit déterminé la fréquence de mise à jour car le contrôle de zone de texte de Titre ne dispose pas d'attribut update.</p> <p>Pour la zone de texte Titre du document, la fonction getCurrentValue() suivante appelle la fonction dom.get TITLE() de l'interface de programmation d'application (API) JavaScript pour obtenir et renvoyer le titre en cours.</p> <p>La fonction se présente comme suit :</p> <p>function getCurrentValue() <br /> { var title = ""; var dom = dw.getDocumentDOM(); if (dom) title = dom.getTitle(); return title; <br /> }</p> <p>La fonction getTitle() renvoie la valeur Document sans nom, affichée dans la zone de texte, en attendant que l'utilisateur attribue un titre au document. Àpres la saisie d'un titre par l'utilisateur, la fonction getTitle() renvoie cette valeur et Dreamweaver l'affiche comme nouveau titre du document.</p> <p>Pour voir le fischier HTML complet qui contient les fonctions JavaScript pour la zone de texte Titre, reportez-vous au fischier EditTitle.htm dans le dossier Toolbars/MM.</p> <p>Le dossier MM est réservé aux fichiers Macromedia Créée un nouveau dossier dans le dossier Toolbars afin d'y stocker votre code JavaScript.</p> <h1 id="fichier-de-définition-de-la-barre-doutils">Fichier de définition de la barre d'outils</h1> <p>Une barre d'outils est une simple liste de boutons radio, boutons-poussoirs, zones de texte et autres éléments de barre d'outils, évientuellesment divisée par des balises separator. Chaque élément de barre d'outils peut être une reférence à un élément à l'aide de la balise itemref, une séparation, à l'aide de la balise separator ou une définition complète d'élement de barre d'outils pour une case à cocher ou une zone de texte, comme décrit, par exemple, dans Balises d'éléments de barre d'outils, page 238.</p> <p>Tous les fichiers de définition de barre d'outils commencer par les déclarations suivantes :</p> <pre><code class="language-xml"><?xml version="1.0" encoding="optional_encoding"?> <!DOCTYPE toolbarset SYSTEM "-//Macromedia//DWExtension toolbar 5.0"> </code></pre> <p>Si l'encodage est ignoré, Dreamweaver utilise l'encodage par défaut du système d'exploitation.</p> <p>Après les déclarations, le fischier consiste en une simple balise toolbarset qui contient un nombre indéfini des balises suivantes : balises toolbar, itemref, separator, include et itemtype, dans lesquelles itemtype est button, checkbutton, radiobutton, menubutton, dropdown, combobox, editcontrol ou colorpicker. L'exemple suivant, un extrait abrégé du fischier toolbars.xml, représentée la hierarchie des balises dans le fischier de barre d'outils. Dans cet exemple, les attributs d'éléments de barre d'outils qui sont décrits dans les sections suivantes, sont replacés par des.) (...).</p> <pre><code class="language-xml"><?xml version="1.0"?> <!DOCTYPE toolbarset SYSTEM "-//Macromedia//DWExtension toolbar 5.0"> <toolbarset> </code></pre> <pre><code class="language-xml"><!-- main toolbar --> <toolbar id="DW_Toolbar(Main" label="Document"> <radiobutton id="DW_CodeView". .. /> <radiobutton id="DW_SplitView". .. /> <radiobutton id="DW_DesignView". .. /> <separator /> <checkbutton id="DW_LiveDebug". .. /> <checkbutton id="DW_LiveDataView". .. /> <separator /> <editcontrol id="DW_SetTitle". .. /> <menubutton id="DW_FileTransfer". .. /> <menubutton id="DW_Preview". .. /> <separator /> <button id="DW_DocRefresh". .. /> <button id="DW_Reference". .. /> <menubutton id="DW_CodeNav". .. /> <menubutton id="DW_;ViewOptions". .. /> </toolbar> </toolbarset> </code></pre> <p>La section suivante décrit en détaill chacune des balises de barre d'outils.</p> <h1 id="toolbar"><toolbar></h1> <h1 id="description-101">Description</h1> <p>Définit une barre d'outils. Dreamweaver affiche les éléments et les séparateurs de gauche à droite dans l'ordre spécifique et les met en forme automatiquement. Le fjichier de(barre d'outils ne spécifie pas l'espacement entre les éléments, mais vous pouvez définir la largeur de certains types d' éléments.</p> <h1 id="attributes-72">Attributes</h1> <p>id, label, {container}, {initiallyVisible}, {initialPosition}, {relativeTo}</p> <ul> <li>id="id_unique" Obligatoire. Une chaîne d'identificateur doit être unique dans un fichier ainsi que dans tous les fichiers inclus dans ce fichier. Les fonctions API JavaScript qui manipulent une barre d'outils se réferent à cette dernière par son ID. Pour plus d'informations sur ces fonctions, voir le Guide des API de Dreamweaver. Si deux barres d'outils dans un même fichier possèdent le même ID, Dreamweaver affiche un message d'erreur. <br /> ■ label="string" Obligatoire. L'attribut label spécifique l'étiquette, une chaîne de caractères que Dreamweaver affiche pour l'utilisateur. L'étiquette s'affiche dans le menu Affichage > Barre d'outils et dans la barre de titre de la barre d'outils lorsque celle-ci est flottante. </li> <li>container="mainframe" ou "document" Adopte par défaut la valeur "mainframe". Indique la position d'ancrage de la barre d'outils dans l'espace de travail de Dreamweaver sous Windows. Si le contenant indique "mainframe", la barre d'outils apparait à l'estateur de l'espace de travail et fonctionne sur le document au premier plan. Si le contenant indique "document", la barre d'outils apparait dans chaque fenêtre de document. Sur Macintosh, toutes les barres d'outils s'affichent dans chaque fenêtre de document. <br /> ■ initiallyVisible="true" ou "false". Cette balise indique si la barre d'outils doit être visible la première fois que Dreamweaver la charge depuis le dossier Toolbars. ÀpRES le premier chargement, l'utilisateur contrôle sa visibilité. Dreamweaver enregistre l'état en cours dans le registre système (Windows) ou dans le fisquier de préférences de Dreamweaver (Macintosh) lorsque l'utilisateur quitte Dreamweaver. Dreamweaver rétablit le paramètre à partir du registre ou du fisquier de préférences au redémarrage. Vous pouvez manipuler la visibilité de la barre d'outils en utilisant les fonctions</li> </ul> <p>dom.getToolBarVisibility() et dom.setToolBarVisibility(), comme déscrit dans le Guide des API de Dreamweaver. Si vous ne définisse pas une valeur pour l'attribut initiallyVisible, celui-ci adopte la valeur true.</p> <ul> <li>initialPosition="top", "below" ou "floating". Indique la position initiale de la barre d'outils définie par Dreamweaver, par rapport aux autres barres d'outils lors du premier chargement. Les valeurs possibles de l'argument initialPosition sont décrites dans la liste suivante :</li> </ul> <p>top Il s'agit de la position par défaut, de façon à ce que la barre d'outils s'affiche en haut de la fenêtre du document. Si plusieurs barres d'outils spécifique top pour un type de fenêtre donné, elles apparaissent dans l'ordre de chargement dans Dreamweaver. Cet ordre risque d'être aléatoire si les barres d'outils sont localisées dans des fichiers séparés. <br /> below La barre d'outils apparait au début de la ligne directement en dessous de la barre d'outils spécifique dans l'attribut relativeTo. Dreamweaver affiche un message d'erreur s'il ne trouve pas la barre d'outils relativeTo. Si plusieurs barres d'outils spécifique below par rapport à la même barre d'outils, elles apparaisent dans l'ordre de chargement dans Dreamweaver. Cet ordre risque d'être aléatoire si les barres d'outils sont localisées dans des fichiers séparés. <br /> - floating La barre d'outils n'est pas ancreé à la fenêtre ; elle flotte au-dessus du document. Dreamweaver place automatiquement la barre d'outils de sorte qu'elle soit décalée par rapport aux autres barres d'outils flottantes. Sur Macintosh, floating est traité de la même façon que top.</p> <p>Comme avec l'attribut initiallyVisible, l'attribut initialPosition s'applique uniquement lors du premier chargement de la barre d'outils par Dreamweaver. Ensuite, la position de la barre d'outils est enregistrée dans le registre ou dans le fjichier de préférences de Dreamweaver. Vous pouvez rétablier la position de la barre d'outils en utilisant la fonction dom.setToolBarPosition(). Pour plus d'informations sur la fonction dom.setToolBarPosition(), voir le Guide des API de Dreamweaver.</p> <p>Si vous ne spécifie pas une valeur pour l'attribute initial Position, Dreamweaver positionne la barre d'outils selon l'ordre de chargement.</p> <p>relativeTo="id_barre_outils" Cet attribut est requis si l'attribut initialPosition indique below. Dans les autres cas, cet argument est ignore. Indique l'ID de la barre d'outils en dessous de laquelle cette barre d'outils doit être placée.</p> <h1 id="contenu-32">Contenu</h1> <p>La balise toolbar comprend les balises include, itemref et separator ainsi que des définitions d' éléments individuels tels que button, combobox, dropdown, etc. Pour obtenir une description des définitions d' éléments que vous pouvez spécifique, voir Balises d' éléments de barre d'outils, page 238.</p> <h1 id="contenant-31">Contenant</h1> <p>La balise toolbarset.</p> <h1 id="example-101">Example</h1> <p><toolbar id="MyDWedit_toolbar" label="Edit"></p> <h1 id="include"><include/></h1> <h1 id="description-102">Description</h1> <p>Charge les éléments de barre d'outils depuis le fichier spécifique avant de continuer à charger le fichier en cours. Les éléments de barre d'outils définis dans le fichier inclus peuvent être référencés dans le fichier en cours. Si un fichier tente plusieurs fois d'inclure un autre fichier, Dreamweaver affiche un message d'erreur et ignore la fonction include. Les balises toolbar dans le fichier inclus sont ignorées, mais les éléments dans ces barres d'outils restent disponibles comme références dans le fichier en cours.</p> <h1 id="attributes-73">Attributes</h1> <p>Le chemin de fichier, relatif au dossier Toolbars, du fichier XML de la barre d'outils à inclure.</p> <h1 id="contenu-33">Contenu</h1> <p>Néant</p> <h1 id="contenant-32">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-102">Example</h1> <p><include file="mine/editbar.xml"/></p> <h1 id="itemtype">(itemtype/></h1> <h1 id="description-103">Description</h1> <p>Définit un élément de(bar d'outils. Les éléments de barre d'outils peuvent être des boutons, des boutons radio, des boutons-poussoirs, des zones de liste modifiables, des menus déroulants, etc. Pour obtenir la liste des types d' éléments de barre d'outils que vous pouvez définir, voir Balises d' éléments de barre d'outils, page 238.</p> <h1 id="attributes-74">Attributes</h1> <p>Les attributs varient en fonction de l'objet que vous définissez. Pour obtenir la liste des attributs que vous pouvez spécifique pour les éléments de barre d'outils, voir Attributes de balises d'éléments, page 244.</p> <h1 id="contenu-34">Contenu</h1> <p>Néant</p> <h1 id="contenant-33">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-103">Example</h1> <p><button id="strikeout_button" ... /></p> <h1 id="itemref"><itemref/></h1> <h1 id="description-104">Description</h1> <p>Fait reférence à (et inclut dans la barre d'outils en cours) un élément de barre d'outils définis dans une barre d'outils précédente ou en dehors de toutes les barres d'outils.</p> <h1 id="attributes-75">Attributes</h1> <p>id,{showIf}</p> <ul> <li>id = "reference_id" Obligatoire. Il doit s'agir de l'ID d'un élément définii au préalable ou inclus dans le fichier. Dreamweaver n'autorise pas les références en aval. Si une balise d'élément de barre d'outils fait référence à un ID non défini, Dreamweaver affiche un message d'erreur et ignore la référencé. <br /> showIf="script" Indique que cet élément apparait uniquement sur la barre d'outils si le script spécifique renvoie la valeur true. Par exemple, vous pouvez utiliser showIf pour afficher certains boutons dans une application donnée uniquement, ou lorsqu'une page est écrite en langage côte serveur, tel que ColdFusion, ASP ou JSP. Si vous ne spécifie pas l'attribut showIf, l'élement apparait systématiquement. Dreamweaver vérifie cette propriété à chaque fois que l'activateur de l'élement s'exécute ; c'est-à-dire, en fonction de la valeur de l'attribut update. Vous doivent utiliser cet attribut avec prudence. L'attribut showIf peut être utilisé dans la définition de l'élement ou dans une référence à l'élement depuis une barre d'outils. Si la définition et la référence spécifique toutes deux l'attribut showIf, Dreamweaver affiche l'élement uniquement si les deux conditions sont vérifiées. L'attribut showIf est l'équivalent de la fonction showIf() dans un fjichier de commandes.</li> </ul> <h1 id="contenu-35">Contenu</h1> <p>Néant</p> <h1 id="contenant-34">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-104">Example</h1> <pre><code class="language-twig"><itemref id="strikeout_button"> </code></pre> <h1 id="separator-3"><separator/></h1> <h1 id="description-105">Description</h1> <p>Insere un séparateur à l'emplacement en cours dans la barre d'outils.</p> <h1 id="attributes-76">Attributes</h1> <pre><code class="language-txt">{showIf} </code></pre> <p>L'attribut showif indique que le séparateur ne doit apparaître sur la barre d'outils que si le script donné renvoie la valeur true. Par exemple, vous pouvez utiliser l'attribut showIf pour afficher le séparateur uniquement dans une application générée ou uniquement lorsque la page contient un certain type de document. Si l'attribut showIf n'est pas spécifique, le séparateur s'affiche systématiquement.</p> <h1 id="contenu-36">Contenu</h1> <p>Néant</p> <h1 id="contenant-35">Contenant</h1> <p>La balise toolbar.</p> <h1 id="example-105">Example</h1> <pre><code class="language-txt"><separator/> </code></pre> <h1 id="balises-d-éléments-debar-doutils">Balises d' éléments de(bar d'outils</h1> <p>Chaque type d' éléments de barre d'outils possède sa propre balise et son propre ensemble d'attributs obligatoires et facultatifs. Vous pouvez définir des éléments toolbar à l'intérieur ou à l'estérieur des barres d'outils. En général, il est préféable de les définir à l'estérieur et de les référencer à partir des barres d'outils à l'aide de la balise itemref.</p> <p>Vou puez définir les types d' éléments suivants dans une barre d'outils.</p> <h1 id="button-2"><button></h1> <h1 id="description-106">Description</h1> <p>Ce bouton-poussoir exécute une commande spécifique lorsqu'vous cliquez dessus. Il ressemble au bouton Référence de la barre d'outils de Dreamweaver et se comporte comme tel.</p> <h1 id="attributes-77">Attributes</h1> <pre><code class="language-javascript">id, image, tooltip, command, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {domRequired}, {enabled}, {update}, {arguments} </code></pre> <p>Pour obtenir une description de chaque attribut, voir Attributes de balises d'éléments, page 244.</p> <h1 id="contenu-37">Contenu</h1> <p>Néant</p> <h1 id="contenant-36">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-106">Example</h1> <p><BUTTON ID="DW_DocRefresh" image="Toolbars/images/MM/refresh,gif" disabledImage="Toolbars/images/MM/refresh_dis.gif" toolkitip="Refresh Design View (F5)" enabled = (((dw.getDocumentDOM( ) null)&&(dw.getDocumentDOM( ).getView(! = 'browse') &&(!dw.getDocumentDOM( ).isDesignViewUpdated())")command = "dw.getDocumentDOM( ).synchronizeDocument( )" update = "onViewChange,onCodeViewSyncChange"/></p> <h1 id="checkbutton-2"><checkbutton></h1> <h1 id="description-107">Description</h1> <p>Un bouton-poussoir est un bouton qui peut être activé ou désactivé et qui exécute une commande spécifique lorsqu'il est activé. Lorsqu'il est activé, il apparait enforcé et en surbrillance. Lorsqu'il est désactivé, il apparait plat. Dreamweaver implémente les états suivants pour les boutons-poussoirs : au passage de la souris ;,enforcé ; au passage de la souris si enforcé ; désactivé si enforcé. Le gestionnaire spécifique par l'attribut checked ou par la fonction isCommandChecked() doit garantir que le fait de cliquer sur ce bouton modifie son état.</p> <h1 id="attributes-78">Attributes</h1> <pre><code class="language-javascript">id, {showIf}, image, {disabledImage}, {overImage}, tooltip, {label}, {file}, {domRequired}, {enabled}, checked, {update}, command, {arguments} </code></pre> <p>Pour obtenir une description de chaque attribut, voir Attributs de balises d'éléments, page 244.</p> <h1 id="contenu-38">Contenu</h1> <p>Néant</p> <h1 id="contenant-37">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-107">Example</h1> <pre><code class="language-txt"><CHECKBUTTON ID="DW_LiveDebug" image="Toolbars/images/MM-debugview.gif" disabledImage="Toolbars/images/MM/globe_dis.gif" tooltip="Live Debug" enabled="dw.canLiveDebug()" checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'browse'" command="dwtoggleLiveDebug() " showIf="dw.canLiveDebug() " update="onViewChange"/> </code></pre> <h1 id="radiobution"><radiobution></h1> <h1 id="description-108">Description</h1> <p>Le bouton radio se comporte comme le bouton-poussoir, mais apparait en relief lorsqu'il est désactivé. Dreamweaver implémente les états suivants pour les boutons radio : au passage de la souris ;,enforcé;au passage de la souris si enforcé;désactivé si enforcé.Dreamweaver ne force pas l'exclusion mutuelle entre les boutons radio. Le gestionnaire spécifique par l'attribut checked ou par la fonction isCommandChecked() doit garantir que les états activé et désactivé des boutons radio sont cohérents.</p> <p>Les boutons radio fonctionnent comme les boutons des modes Code, Création et affichage à deux volets de la barre d'outils de document de Dreamweaver.</p> <h1 id="attributes-79">Attributes</h1> <pre><code class="language-javascript">id, image, toolkit, checked, command, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {domRequired}, {enabled}, {update}, {arguments} </code></pre> <p>Pour obtenir une description de chaque attribut, voir Attributs de balises d'éléments, page 244.</p> <h1 id="contenu-39">Contenu</h1> <p>Néant</p> <h1 id="contenant-38">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-108">Example</h1> <pre><code class="language-txt"><RADIOBUTTON ID="DW_CodeView" image="Toolbars/images/MM/codeView.gif" disabledImage="Toolbars/images/MM/codeView_dis.gif" tooltip="Show Code View" domRequired="false" enabled="dw.getDocumentDOM() != null" checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'code'" command="dw.getDocumentDOM().setView('code')" update="onViewChange"/> </code></pre> <h1 id="menubutton-2"><menubutton></h1> <h1 id="description-109">Description</h1> <p>Un bouton de menu est un bouton qui invoque le menu contextuel spécifique par l'attribut menuid. Dreamweaver implémente les états survol de souris et pression pour les boutons de menu. Dreamweaver ne dessine pas la flèche du menu (la flèche pointant vers le bas qui indique que les éléments de menu sont attachés au bouton); vous doivent l'inclure dans votre icône. Les boutons Gestion de fichiers et Navigation dans le code sur la barre d'outils de document de Dreamweaver sont des exemples de boutons de menu.</p> <h1 id="attributes-80">Attributes</h1> <pre><code class="language-javascript">id, image, tooltip, menuID, domRequired, enabled, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {update} </code></pre> <p>Pour obtenir une description de chaque attribut, voir Attributs de balises d'éléments, page 244.</p> <h1 id="contenu-40">Contenu</h1> <p>Néant</p> <h1 id="contenant-39">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-109">Example</h1> <pre><code class="language-javascript">< MENUBFUNCTION ID="DW_CodeNav" image="Toolbars/images/MM/codenav.gif" disabledImage="Toolbars/images/MM/codenav_dis.gif" tooltip="Code Navigation" enabled="dwFocused() == 'TextView' || dw.getFocus() == 'html'" </code></pre> <pre><code class="language-javascript">menuID="DWCodeNavPopup" update="onViewChange";// </code></pre> <h1 id="dropdown"><dropdown></h1> <h1 id="description-110">Description</h1> <p>Un menu déroulant est un menu non modifiable qui exécute une commande spécifique attachée à une fonction JavaScript lorsque vous Sélectionné une entrée et que le menu se met à jour. Ce menu ressemble à l'option Format de l'inspecteur de propriétés de texte et fonctionne de la même manière, mais s'affiche en taille standard et non en taille réduite comme dans l'inspecteur de propriétés.</p> <h1 id="attributes-81">Attributes</h1> <pre><code class="language-javascript">id, tooltip, file, enabled, checked, value, command, {showIf}, {label}, {width}, {domRequired}, {update}, {arguments} </code></pre> <p>Pour obtenir une description de chaque attribut, voir Attributs de balises d'éléments, page 244.</p> <h1 id="contenu-41">Contenu</h1> <p>Néant</p> <h1 id="contenant-40">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-110">Example</h1> <pre><code class="language-xml"><dropdown id="Font_Example" width="115" tooltip="Font" domRequired="false" file="Toolbars/mineFONTExample.htm" update="onSelChange"/> </code></pre> <h1 id="combobox"><combobox></h1> <h1 id="description-111">Description</h1> <p>Une zone de liste est un menu dérounant modifiable qui exécute une commande lorsqu'vous scélectionnez une entrée ou que vous apportez une modification dans la zone de texte, puis changez la scélection. Le menu ressemble à l'options Police de l'inspecteur de propriétés de texte et fonctionne de la même manière, mais s'affiche en taille standard et non en taille réduite comme dans l'inspecteur de propriétés.</p> <h1 id="attributes-82">Attributes</h1> <p>id, file, tooltip, enabled, value, command, {showiI}, {label}, {width}, {domRequired}, {update}, {arguments}</p> <p>Pour obtenir une description de chaque attribut, voir Attributs de balises d'éléments, page 244.</p> <h1 id="contenu-42">Contenu</h1> <p>Néant</p> <h1 id="contenant-41">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-111">Example</h1> <pre><code class="language-txt"><COMBOBOX ID="Address_URL" width="300" tooltip="Address" label="Address: " file="Toolbars/MM/AddressURL.htm" update="onBrowserPageBusyChange"/> </code></pre> <h1 id="editcontrol"><editcontrol></h1> <h1 id="description-112">Description</h1> <p>Une zone de contrôle d'edition est une zone de texte modifiable qui exécute une commande lorsqu'elles apportez une modification dans la zone de texte et changez la sélection.</p> <h1 id="attributes-83">Attributes</h1> <p>id, tooltip, file, value, command, {showIf}, {label}, {width}, {domRequired}, {enabled}, {update}, {arguments}</p> <p>Pour obtenir une description de chaque attribut, voir Attributs de balises d'éléments, page 244.</p> <h1 id="contenu-43">Contenu</h1> <p>Néant</p> <h1 id="contenant-42">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-112">Example</h1> <pre><code class="language-xml"><EDITCONTROL ID="DW_SetTitle" label="Title:" toolkitip="Document Title" width="150" file="Toolbars/MM/EditTitle.htm"/> </code></pre> <h1 id="color-picker"><color Picker></h1> <h1 id="description-113">Description</h1> <p>Un sélecteur de couleur est un panneau de couleurs, sans zone de texte associée, qui exécute une commande lorsque l'utilisateur seLECTIONne une nouvelle couleur. Ce panneau ressemble au sélecteur de couleur de l'inspecteur de propriétés de Dreamweaver et se comporte de la même manière. Vous pouvez désirir une autre icône pour replacer l'icone par défaut.</p> <h1 id="attributes-84">Attributes</h1> <pre><code class="language-javascript">id, tooltip, value, command, {showIf}, {image}, {disabledImage}, {overImage}, {label}, {colorRect}, {file}, {domRequired}, {enabled}, {update}, {arguments} </code></pre> <p>Pour obtenir une description de chaque attribut, voir Attributes de balises d'éléments, page 244.</p> <h1 id="contenu-44">Contenu</h1> <p>Néant</p> <h1 id="contenant-43">Contenant</h1> <p>La balise toolbar ou toolbarset.</p> <h1 id="example-113">Example</h1> <pre><code class="language-xml"><colorpicked id="Color_Example" image="Toolbars/images/colorpickedIcon.gif" disabledImage="Toolbars/images/colorpickedIconD.gif" colorRect="0 12 16 16" tooltip="Text Color" domRequired="false" file="Toolbars/mine/colorExample.htm" update="onSelChange"/> </code></pre> <h1 id="attributes-de-balises-déléments">Attributes de balises d'éléments</h1> <p>Les attributs de balises d'éléments de barre d'outils ont les significations suivantes :</p> <h1 id="idunique_id">id="unique_id"</h1> <p>Obligatoire. L'attribut id est l'identificateur de l'élement de barre d'outils. L'attribut id doit être unique dans le fichier en cours, ainsi que dans tous les fichiers inclus dans le fichier en cours. La balise itemref utilise l'id de l'élement pour réféencer et inclure un élément dans une barre d'outils.</p> <h1 id="example-114">Example</h1> <p><button id="DW_DocRerefresh" . . . ></p> <h1 id="showlfscript">showlf="script"</h1> <p>Facultatif. Cet attribut précise que l'objet s'affiche sur la barre d'outils uniquement si le script renvoie la valeur true. Par exemple, vous pouvez utiliser l'attribut showIf pour afficher certains boutons uniquement lorsqu'une page est écrite dans un certain type de langage côté serveur, tel que ColdFusion, ASP ou JSP. Si vous ne spécifie pas l'attribut showIf, l'objet apparaît systématiquèment.</p> <p>L'attribut showIf est vérifié à chaque fois que l'activateur de l'élement s'execute; c'est-à-dire, en fonction de la valeur de l'attribut update. Il est conseilé d'utiliser l'attribut showIf avec prudence.</p> <p>Vous pouvez spécifique l'attribut showIf dans la définition de l'élement et dans une référence à l'élement sur une balise itemref. Si la définition et la référence spécifique l'attribut showIf, l'élement s'affiche uniquement si les deux conditions indiquent la valeur true. L'attribut showIf est l'équivalent de la fonction showIf() dans un fichier de commandes de barre d'outils. Si vous spécifie l'attribut showIf et la fonction showif(), la fonction remplace l'attribut.</p> <h1 id="example-115">Example</h1> <p>showIf="dw.canLiveDebug()"</p> <h1 id="imageimage_path-2">image="image_path"</h1> <p>Cet attribut est obligatoire pour les boutons, les boutons-poussoirs, les boutons radio, les boutons de menu et de zone de liste modifiable. L'attribut image est facultatif pour les selecteurs de couleurs, et est ignoré pour les autres types d' éléments. L'attribut image spécifique le chemin, par rapport au dossier Configuration, du fichier de l'icone qui s'affiche sur le bouton. En général, le fichier de l'icone est au format GIF ou JPEG, mais tous les formats compatibles avec Dreamweaver sont acceptés.</p> <p>Si vous spécifie une icone pour un选出eur de couleur, celle-ci le remplace entierement. Si l'attribut colorRect est également definite, la couleur en cours s'affiche au-dessus de I'icone dans le rectangle specifie.</p> <h1 id="example-116">Example</h1> <p>image="Toolbars/images/MM/codenav.gif"</p> <h1 id="disabledimageimage_path">disabledImage="image_path"</h1> <p>Facultatif. Dreamweaver ignore l'attribut disabledImage des éléments autres que les boutons, les boutons-poussoirs, les boutons radio, les boutons de menu, de selectingeurs de couleurs et de zone de liste modifiable. Cet attribut spécifique le chemin, par rapport au dossier Configuration, du filchier de l'icone que Dreamweaver affiche si le bouton est désactivé. Si vous ne spécifie pas l'attribut disabledImage, Dreamweaver affiche l'image spécifique dans l'attribut image lorsque le bouton est désactivé.</p> <h1 id="example-117">Example</h1> <p>disabledImage="Toolbars/images/MM/codenav_dis.gif"</p> <h1 id="overimageimage_path">overImage="image_path"</h1> <p>Facultatif. Dreamweaver ignore l'attribut overImage des éléments autres que les boutons, les boutons-poussoirs, les boutons radio, les boutons de menu, de selectingeurs de couleurs et de zone de liste modifiable. Cet attribut spécifique le chemin, par rapport au dossier Configuration, du fjichier de l'icone que Dreamweaver affiche lorsque l'utilisateur survole le bouton à l'aide de la souris. Si vous ne spécifie pas l'attribut overImage, le bouton ne change pas lorsque l'utilisateur le survole, mais Dreamweaver dessine un cercle autour du bouton.</p> <h1 id="example-118">Example</h1> <p>overImage="Toolbars/images/MM/codenav_ovr.gif"</p> <h1 id="tooltiptooltip-string">tooltip="tooltip string"</h1> <p>Obligatoire. Cet attribut spécifique le texte d'identification ou info-bulle qui apparait lorsque le curseur de la souris survole l'objet de la barre d'outils.</p> <h1 id="example-119">Example</h1> <p>=}</p> <h1 id="labellabel-string">label="label string"</h1> <p>Facultatif. L'attribut spécifique l'étiquette qui s'affiche à côté de l'élement. Dreamweaver n'ajoute pas automatiquement deux points aux étiquettes. Les étiquettes des éléments autres que les boutons s'affichent toujours à gauche de l'élement. Dreamweaver place les étiquettes des boutons, boutons-poussoirs, boutons radio, de menu et de zone de liste modifiable à l'intérieur du bouton et à droite de l'icône.</p> <h1 id="example-120">Example</h1> <p>label="Title:"</p> <h1 id="widthnumber">width="number"</h1> <p>Facultatif. Cet attribut ne s'applique qu'aux éléments de zone de texte, menu contextual et zone de liste en spécifique la largeur de l'objet en pixels. Si vous ne spécifie pas l'attribut width, Dreamweaver utilise une largeur par défaut moyenne.</p> <h1 id="example-121">Example</h1> <p>width="150"</p> <h1 id="menuidmenu_id">menuID="menu_id"</h1> <p>Cet attribut est requis pour les boutons de menu et les zones de liste, excepté si vous spécifie la fonction getMenuID() dans un fisquier de commande associé. Dreamweaver ignore l'attribut menuID pour les autres types d'éléments. Cet attribut spécifique l'ID de la barre de menu contenant le menu contextuel qui doit apparaître lorsque l'utilisateur clique sur le bouton, le bouton de menu ou de liste. L'ID provient de l'attribut ID d'une balise menubar dans le fisquier menus.xml.</p> <h1 id="example-122">Example</h1> <p>menuID="DWCodeNavPopup"</p> <h1 id="colorrectleft-top-right-bottom">colorRect="left top right bottom"</h1> <p>L'attribut est facultatif pour les.selecteurs de couleur qui disposent d'un attribut image. L'attribut colorRect est ignoré pour tous les autres types d'éléments, ainsi que pour les selectseurs de couleurs qui ne spécifiert pas une image. Si vous spécifie l'attribut colorRect, Dreamweaver affiche la couleur couramment selectionnée dans le selectiveur de couleur, dans le rectangle, par rapport au côte gauche ou supérieur de l'icone. Si vous ne spécifie pas l'attribut colorRect, Dreamweaver n'affiche pas la couleur couramment selectionnée sur l'image.</p> <h1 id="example-123">Example</h1> <p>colorRect="0 12 16 16"</p> <h1 id="filecommand_file_path">file="command_file_path"</h1> <p>Obligatoire pour les menus déroulants et les zones de liste modifiables. L'attribut file est facultatif pour les autres types d'éléments. L'attribut file spécifique le chemin, par rapport au dossier Configuration, du filchier de commandes contenant les fonctions JavaScript qui serviront à renseigner,mettre à jour et executer l'élement. L'attribut file remplace les attributs en能力和, checked, value, update, domRequired, menuID, showIf et command. En général, si vous spécifie un filchier de commandes avec l'attribut file, Dreamweaver ignore tous les attributs équivalents spécifiés dans la balise. Pour plus d'informations sur les fichiers de commandes, voir API de commande de la barre d'outils, page 251.</p> <h1 id="example-124">Example</h1> <p>file="Toolbars/MM/EditTitle.htm"</p> <h1 id="domrequiredtrue-or-false">domRequired="true" or "false"</h1> <p>Facultatif. Comme avec les menus, l'attribut domRequired spécifique si le mode Creation doit être synchronisé avec le mode Code avant que Dreamweaver n'execute la commande associée. Si vous ne définisse pas cet attribut, il adopte la valeur true. Cet attribut est l'équivalent de la fonction isDOMRequired() dans un fisier de commandes de barre d'outils.</p> <h1 id="example-125">Example</h1> <p>domRequired="false"</p> <h1 id="enabledscript">enabled="script"</h1> <p>Facultatif. Comme avec les menus, le script renvoie une valeur spécifique si l'objet est activé. Si vous ne définisse pas cet attribut, il adopte la valeur enregistréd. L'attribut enregistréd est l'équivalent de la fonction canAcceptCommand() dans un fischié de commandes de barre d'outils.</p> <h1 id="example-126">Example</h1> <p>enabled="dw.getFocus() == 'TextView' || dw.getFocus() == 'html'"</p> <h1 id="checkedscript">checked="script"</h1> <p>Cet attribut est obligatoire pour les boutons-poussoirs et radio. Dreamweaver ignore l'attribut checked pour les autres types d'éléments. Comme avec les menus, le script renvoie une valeur spécifique si l'objet est activé ou pas. L'attribut checked est l'équivalent de la fonction isCommandChecked() dans un fisier de commandes de barre d'outils. Si vous ne définisse pas cet attribut, il adopte la valeur unchecked.</p> <h1 id="example-127">Example</h1> <p>checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'code'"</p> <h1 id="valuescript">value="script"</h1> <p>Cet attribut est obligatoire pour les menus déroulants, les zones de liste modifiables, les zones de texte et les selecteurs de couleurs. Dreamweaver ignore l'attribut value pour les autres types d' éléments.</p> <p>Pour déterminer la valeur à afficher pour les menus déroulants et les zones de liste modifiables, Dreamweaver appelle d'abord la fonction isCommandchecked() pour chaque élément dans le menu. Si la fonction isCommandchecked() renvoie la valeur true pour un élément,</p> <p>Dreamweaver affiche la valeur du premier. Si aucun élément ne renvoie la valeur true ou si la fonction isCommandChecked() n'est pas définie, Dreamweaver appelle la fonction</p> <p>getCurrentValue() ou execute le script spécifique par l'attribut value. Si le contrôle est une zone de liste modifiable, Dreamweaver affiche la valeur renvoyée. Si le contrôle est un menu déroulant, Dreamweaver ajoute temporairement la valeur renvoyée dans la liste et l'affiche.</p> <p>Dans tous les autres cas, le script renvoie la valeur en cours à afficher. Pour les menus déroulants ou les zones de liste modifiables, cette valeur doit correspondre à l'un des éléments dans la liste du menu. Pour les zones deliste modifiables et les zones de texte, la valeur peut correspondre à une chaine quelconque renvoyée par le script. Pour les选出urs de couleurs, la valeur doit être une couleur valide, mais Dreamweaver ne met pas ceci en vigueur.</p> <p>L'attribut value est l'équivalent de la fonction getCurrentValue() dans un fisquier de commandes de barre d'outils.</p> <h1 id="updateupdate_frequency_list">update="update_frequency_list"</h1> <p>Facultatif. Cet attribut spécifique la fréquence d'exécution des gestionnaires des attributs en能力和, checked, showif et value pourmettre à jour l'état visible de l'élement. L'attribut update est l'équivalent de la fonction receiveArguments() dans un fichier de commandes de barre d'outils.</p> <p>Voudevez spécifier la fréquence de la mise à jour des éléments de barre d'outils car ces éléments, contrairement aux éléments de menu, sont toujours visibles. C'est pourquoi vous devez toujours selectionner la fréquence la moins élevée possible et vous assurer que les gestionnaires des attributs enabled, checked et value sont aussi simples que possible.</p> <p>La liste suivante présente les gestionnaires possibles pour la fonction</p> <p>liste_fréquence_mise_à jour, dans l'ordre croissant de fréquence. Si vous ne définisse pas une valeur pour l'attribute update, la fréquence de mise à jour prend la valeur onEdit. Vous pouvez spécifique plusieurs fréquences de mise à jour, séparées par des virgules. Les gestionnaires s'exécutent sur l'un des événements spécifiés suivants:</p> <p>onServerModelChange s'exécuté lorsquelème de serveur de la page en cours change. <br /> onCodeViewSyncChange s'exécuté lorsque le mode Code se synchronise ou se désynchronise avec le mode Création. <br /> onViewChange s'exécuté chaque fois que l'utilisateur bascule entre les modes Code et Création, ou entre les modes Code, Création et affichage à deux volets. <br /> onEdit s'exécuté chaque fois que le document est modifié en mode Création. Les modifications apportées en mode Code ne déclenchent pas cet événement. <br /> onSelChange s'exécuté chaque fois que la sélection est modifiée en mode Création. Les modifications apportées en mode Code ne déclenchent pas cet événement. <br /> onEveryIdle s'exécuté régulièrement lorsqu'application est inactive. Ceci peut demander un certain temps car les gestionnaires enabler/checked/showif/value sont réalisés fréquement. Utilisé-la uniquement pour les boutons dont l'état actif doit être modifiérapidement à des moments spécifique.</p> <h1 id="ernre">eRnre</h1> <p>En réalité, dans tous ces cas, Dreamweaver exécute les gestionnaires après l'évenement spécifique, lorsque l'application est au repos. L'exécution des gestionnaires après chaque modification ou changement de sélection n'est pas garantie; les gestionnaires s'exécutentès que possible après une série de modifications ou de changements de sélection. Par contre, les gestionnaires s'exécutent lorsque l'utilisateur clique sur un élément de barre d'outils.</p> <h1 id="example-128">Example</h1> <p>update="onViewChange"</p> <h1 id="commandscript">command="script"</h1> <p>Cet attribut est obligatoire pour tous les éléments sauf pour les boutons de menu.</p> <p>Dreamweaver ignore l'attribut command pour les boutons de menu. Sécífie la fonction</p> <p>JavaScript à exécuter lorsque l'utilisateur effectue l'une des opérations suivantes :</p> <p>L'utilisateur clique sur un bouton. <br /> L'utilisateur selectionne un élément dans un menu déroulant ou dans une zone de liste. <br /> L'utilisateur appuie sur la touche Tab pour passer à une autre zone, appuie sur la touche Retour ou clique hors d'une zone de texte ou de liste. <br /> L'utilisateur selectionne une couleur dans un selecteur de couleur.</p> <p>L'attribut command est l'équivalent de la fonction receiveArguments() dans un fisquier de commandes de barre d'outils.</p> <h1 id="example-129">Example</h1> <p>command="dwtoggleLiveDebug()"</p> <h1 id="argumentsargument_list">arguments="argument_list"</h1> <p>Facultatif. Cet attribut spécifique la liste d'arguments, séparés par des virgules, pour transmettre la fonction receiveArguments() à un fisier de commandes de barre d'outils. Si vous ne définisse pas l'attribut arguments, Dreamweaver transmit l'ID de l'élement de la barre d'outils. En outre, les menus déroulants, les zones de liste modifiables, les zones de texte et les selecteurs de couleurs transmettent leur valeur en cours comme premier argument, avant ceux spécifiés par l'attribut arguments et avant l'ID de l'élement si aucun argument n'est spécifique.</p> <h1 id="example-130">Example</h1> <p>Dans une barre d'outils qui comporte les boutons Annuler et Répéter, chaque bouton appelle le fichier de commandes de menu, Edit_Clipboard.htm, et transmet un argument spécifique l'action, comme indiqué dans l'exemple suivant :</p> <p><button id="DW_Undo" image="Toolbars/images/MM/undo.gif" disabledImage="Toolbars/images/MM/undo_dis.gif" tooltip="Undo" file="Menua/MM/Edit_Clipboard.htm" arguments = "'undo'" update "onEveryIdle"/> <br /> <button id "DW_Redo" image "Toolbars/images/MM/redo.gif" disabledImage "Toolbars/images/MM/redo_dis.gif" tooltip "Redo" file "Menua/MM/Edit_Clipboard.htm" arguments "'redo'" update "onEveryIdle"/></p> <h1 id="api-de-commande-de-la-barre-doutils">API de commande de la barre d'outils</h1> <p>Dans de nombreux cas où vous avez spécifique un script pour un attribut, vous pouvez également implémenter cet attribut à l'aide d'une fonction JavaScript dans un fisquier de commandes. Cette action est nécessaire lorsque les fonctions doivent accepter des arguments, comme dans le gestionnaire d'une zone de texte, et obligatoire pour les menus déroulants et les zones de liste modifiables.</p> <p>L'API du fidier de commandes pour les éléments de la barre d'outils est une extension de l'API du fidier de commandes de menu ; vous pouvez ainsi réutiliser les fidiers de commandes de menu en tant que fidiers de commandes de barre d'outils en leur ajoutant des fonctions supplémentaires spécifiques aux barres d'outils.</p> <h1 id="canacceptcommand-5">canAcceptCommand()</h1> <h1 id="disponibilité-3">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-114">Description</h1> <p>Déterminé si la barre d'outils est activée. La condition par défaut d'un élément étant l'état activé, vous n'avez pas besoin de définir cette fonction, sauf si la valeur false est renvoyée dans au moins un cas.</p> <h1 id="arguments-19">Arguments</h1> <p>Dans le cas des menus déroulants, zones de liste modifiables, zones de texte et sélecteurs de couleurs, le premier argument est la valeur en cours dans le contrôle. La fonction getDynamicContent() peut, évientuèlement, associier des ID individuels aux éléments d'un menu dérouulant. Si l'objet seLECTIONné dans le menu dérouulant dispose d'un ID, Dreamweaver transmet cet ID à la fonction canAcceptCommand() au lieu de transmettre la valeur. En ce qui concerne les zones de liste modifiables, si le contenu actuel de la zone de texte ne correspond pas à une entrée dans le menu dérouulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver compare le contenu de la liste avec celui du menu dérouulant, sans tener compte des majuscules et des minuscules, afin de vérifier la correspondence des éléments.</p> <p>Si vous spécifie l'attribut arguments pour cet élément de la barre d'outils dans le fjichier toolbars.xml, les arguments sont transmis ensuite. Si vous n'vez pas définir l'attribut arguments, Dreamweaver transmet l'ID de l'élement.</p> <h1 id="valeurs-renvoyées-17">Valeurs renvoyées</h1> <p>Dreamweaver attend une valeur booléenne: true si l'objet est activé, false dans les autres cas.</p> <h1 id="example-131">Example</h1> <pre><code class="language-txt">function canAcceptCommand() { return (dw.getDocumentDOM() != null); } </code></pre> <h1 id="get價值">get價值()</h1> <h1 id="disponibilité-4">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-115">Description</h1> <p>Renvoie la valeur en cours pour afficher l'objet. Dreamweaver appelle la fonction getCurrentValue() pour les menus déroulants, les zones de liste modifiables, les zones de texte et les sélections de couleurs. Pour les menus déroulants, la valeur en cours doit représenter l'un des éléments dans le menu. Si ce n'est pas le case, Dreamweaver selectionne le premier élément de la liste. Pour les zones de liste modifiables et les zones de texte, cette valeur peut correspondre à une chaine quelconque renvoyée par la fonction. Pour les sélections de couleurs, la valeur doit être une couleur valide, mais Dreamweaver ne force pas cette condition. Cette fonction est l'équivalent de l'attribut value.</p> <h1 id="arguments-20">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-18">Valeurs renvoyées</h1> <p>Dreamweaver attend l'affichage d'une chaine contenant la valeur en cours. Pour le sélection de couleur, la chaine contient la forme RVB de la couleur sélectionnée (par exemple #FFFFFF pour le blanc).</p> <h1 id="example-132">Example</h1> <pre><code class="language-javascript">function getCurrentValue() { var title = ""; var dom = dw.getDocumentDOM(); if (dom) title = dom.get TITLE(); return title; } </code></pre> <h1 id="getdynamiccontent-2">getDynamicContent()</h1> <h1 id="disponibilité-5">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-116">Description</h1> <p>Cette fonction est obligatoire pour les menus déroulants et les zones de liste modifiables. Comme pour les menus, cette fonction renvoie un tableau de chaînes pour renseigner le menu déroulant. Chacune de ces chaînes peut eventuallyment se terminer par "; id=id". Si un ID est spécifique, Dreamweaver le transmet à la fonction receiveArguments() au lieu de faire apparaitre la chaine dans le menu.</p> <p>Le nom getDynamicContent() préte à confusion car cette fonction doit être utilisé même si la liste des entrées dans le menu est fixe. Par exemple, le fidchier Text_Size.htm du dossier Configuration/Menua/MM n'est pas un menu dynamique ; il est uncon qu pour etre appelé depuis des éléments statiques d'un ensemble de menus. Toutefois, l'ajout d'une fonction getDynamicContent() renvoyant une liste de tailles de police possibles permet d'utiliser le même fidchier de commandes dans un menu déroulant de barre d'outils. Les éléments de barre d'outils ignorent les caractères de soulignement dans les chaînes des tableaux renvoyés, pour vous permettre de réutiliser les fidchiers de commandes de menu. Dans le fidchier de commandes de menu, Dreamweaver ignore la fonction getDynamicContent() car l'objet de menu n'est pas marqué comme dynamique.</p> <h1 id="arguments-21">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-19">Valeurs renvoyées</h1> <p>Dreamweaver attend un tableau de chaînes pour renseigner le menu.</p> <h1 id="example-133">Example</h1> <p>function getDynamicContent() <br /> { var items = new Array; var filename dw_configurationPath() ^+ "/Toolbars/MM/ AddressList.xm]"; var location = MMNotes.localURLToFilePathfilename); if (DWfile_exists location)) { var addressData = DWfile.readlocation); var addressDOM = dw.getDocumentDOM(dw_configurationPath()+ '/Shared/MM/Cache/empty.htm'); addressDOM.documentElement.outerHTML = addressData; var addressNodes = addressDOM-elementsByTagName("url"); if(addressNodes.length) { for(var i=0;i < < addressNodes.length;i++) { items[i] = addressNodes[i].address +";id=" ^+ addressNodes[i].address ^+ "'"; }</p> <pre><code class="language-txt">} return items; </code></pre> <h1 id="getmenuid">getMenuID()</h1> <h1 id="disponibilité-6">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-117">Description</h1> <p>Valide uniquement pour les boutons de menu. Dreamweaver appelle la fonction getMenuID() pour obtenir l'ID du menu devant apparaitre lorsque l'utilisateur clique sur le bouton.</p> <h1 id="arguments-22">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyees-3">Valeurs renvoyees</h1> <p>Dreamweaver attend une chaîne contenant un ID de menu, défini dans le fjichier menus.xml.</p> <h1 id="example-134">Example</h1> <p>function getMenuID() <br /> { var dom = dw.getDocumentDOM(); var menuID = 串 ; if(dom) { var view = dom.view(); var focus = dw.getFocus(); if(view = = 'design') { menuID = 'DWDesignOnlyOptionsPopup'; } else if (view = = 'split') { if (focus = = ' TextView') { menuID = 'DWSplitCodeOptionsPopup'; } else { menuID = 'DWSplitDesignOptionsPopup'; } } else if (view = = 'code')</p> <p>{menuID = 'DWCodeOnly0OptionsPopupp';}else{menuID = 'DWBrowse0ptionsPopupp';1}return menuID;</p> <h1 id="getupdatefrequency">getUpdateFrequency()</h1> <h1 id="disponibilité-7">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-118">Description</h1> <p>Sécífie la fréquence d'execution des gestionnaires des attributs enloaded, checked, showif et value pourmettre à jour l'étatvisiblede l'élement.</p> <p>Voudevez spécifier la fréquence de la mise à jour des éléments de barre d'outils car ces éléments, contrairement aux éléments de menu, sont toujours visibles. C'est pourquoi vous devez toujours désirir la fréquence la moins élevée possible et vous assurer que les gestionnaires des attributs enblcd, checked et value sont aussi simples que possible.</p> <p>Cette fonction est l'équivalent de l'attribut update dans un élément de barre d'outils.</p> <h1 id="arguments-23">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-20">Valeurs renvoyées</h1> <p>Dreamweaver attend une chaîne contenant la liste des gestionnaires de mise à jour, séparés par des virgules. Pour obtenir la liste complète des gestionnaires de mise à jour possibles, voir update="update_freqy_list", page 249.</p> <h1 id="example-135">Example</h1> <pre><code class="language-txt">function getUpdateFrequency() { return onSelChange; } </code></pre> <h1 id="iscommandchecked-2">isCommandChecked()</h1> <h1 id="disponibilité-8">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-119">Description</h1> <p>Renvoise une valeur indiquant si l'objet est selectionné. Dans le cas des boutons, l'attribut checké indique si le bouton apparaît activé ou enforcé. La fonction isCommandChecked() est l'équivalent de l'attribut checked dans une balise d'objet de barre d'outils.</p> <h1 id="arguments-24">Arguments</h1> <p>Dans le cas des menus déroulants, zones de liste modifiables, zones de texte et选出eurs de couleurs, le premier argument est la valeur en cours dans le contrôle. La fonction getDynamicContent() peut, évientuèlement, associier des ID individuels aux éléments d'un menu déroulant. Si l'objet selectionné dans le menu dispose d'un ID, Dreamweaver transmet cet ID à la fonction isCommandChecked() au lieu de transmettre la valeur. En ce qui concerne les zones de liste modifiables, si le contenu actuel de la zone de texte ne correspond pas à une entrée dans le menu déroulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver compare le contentu de la zone de liste avec celui du menu déroulant, sans tener compte des majuscules et des minuscules, pour vérifier la correspondance des éléments.</p> <p>Si vous avez spécifique l'attribute arguments pour cet élément, les arguments sont transmis ensuite. Si vous ne définisse pas l'attribute arguments, Dreamweaver transmet l'ID de l'objet.</p> <h1 id="valeurs-renvoyees-4">Valeurs renvoyees</h1> <p>Dreamweaver attend une valeur booléenne : true si l'élement est activé, false dans les autres cas.</p> <h1 id="example-136">Example</h1> <p>L'exemple suivant déterminé quel élément, le cas échéant, doit être activé dans un menu dérouulant contenant des formats de paragraphe et des styles CSS :</p> <p>function isCommandChecked() <br /> { var bChecked = false; var style = arguments[0]; var textFormat dw.getDocumentDOM()..getTextFormat(); if (dw.getDocumentDOM( = null) bChecked = false; if (style = = "None")</p> <pre><code class="language-javascript">bChecked = (dw.cssStylePalette.getSelectedStyle() == '' || textFormat == "") | textFormat == "P" || textFormat == "PRE"); else if (style == "Heading 1") bChecked = (textFormat == "h1"); else if (style == "Heading 2") bChecked = (textFormat == "h2"); else if (style == "Heading 3") bChecked = (textFormat == "h3"); else if (style == "Heading 4") bChecked = (textFormat == "h4"); else if (style == "Heading 5") bChecked = (textFormat == "h5"); else if (style == "Heading 6") bChecked = (textFormat == "h6"); else bChecked = (dw.cssStylePalette.getSelectedStyle() == style); return bChecked; } </code></pre> <h1 id="isdomrequired-3">isDOMRequired()</h1> <h1 id="disponibilité-9">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-120">Description</h1> <p>Sécicie si la commande de barre d'outils nécessite un DOM valide pour fonctionner. Si cette fonction renvoie la valeur true ou si la fonction n'est pas définie, Dreamweaver suppose que la commande nécessite un DOM valide et synchronise les modes Code et Création du document avant de l'exécuter. Cette fonction est l'équivalent de l'attribut domRequired dans une balise d'élement de barre d'outils.</p> <h1 id="arguments-25">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-21">Valeurs renvoyées</h1> <p>Dreamweaver attend une valeur booléenne : true si le DOM est obligatoire, false s'il ne l'est pas.</p> <h1 id="example-137">Example</h1> <pre><code class="language-javascript">function isDOMRequired() { return false; } </code></pre> <h1 id="receivearguments-5">receiveArguments()</h1> <h1 id="disponibilité-10">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-121">Description</h1> <p>Traite tous les arguments transmis depuis un élément de barre d'outils. La fonction receiveArguments() est l'équivalent de l'attribut command dans une balise d'élement de barre d'outils.</p> <h1 id="arguments-26">Arguments</h1> <p>Dans le cas des menus déroulants, zones de liste modifiables, zones de texte et éclecteurs de couleurs, le premier argument est la valeur en cours dans le contrôle. La fonction getDynamicContent() peut, éventuèlement, associier des ID individuels aux éléments d'un menu déroulant. Si l'objet selectionné dans le menu contextuel déroulant dispose d'un ID, Dreamweaver transmet cet ID à la fonction receiveArguments() au lieu de transmettre la valeur. En ce qui concerne les zones de liste modifiables, si le contenu actuel de la zone de texte ne correspond pas à une entrée dans le menu déroulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver compare le contenu de la zone de liste avec celui du menu déroulant, sans tener compte des majuscules et des minuscules, pour vérifier la correspondence des éléments.</p> <p>Si vous avez spécifique l'attribut arguments pour cet élément, les arguments sont transmis ensuite. Si vous n'vez pas définir l'attribut arguments, Dreamweaver transmet l'ID de l'élement.</p> <h1 id="valeurs-renvoyées-22">Valeurs renvoyées</h1> <p>Dreamweaver n'attend rien.</p> <h1 id="example-138">Example</h1> <pre><code class="language-javascript">function receiveArguments(newTitle) { var dom = dw.getDocumentDOM(); if (dom) dom.setTitle(newTitle); } </code></pre> <h1 id="showlf">showlf()</h1> <h1 id="disponibilité-11">Disponibilité</h1> <p>Dreamweaver MX.</p> <h1 id="description-122">Description</h1> <p>Indique qu'un élément apparait sur la barre d'outils uniquement si la fonction renvoie la valeur true. Par exemple, vous pouvez utiliser la fonction showIf() pour afficher certains boutons uniquement lorsque la page utilise un modèle de serveur donné. Si vous ne définisse pas la fonction showif(), l'élement s'affiche toujours. La fonction showIf() est l'équivalent de l'attribut showIf dans une balise d'élement de barre d'outils.</p> <p>La fonction showIf() est appelée à chaque fois que l'activateur de l'élement s'exécuté ; c'est-à-dire, en fonction de la valeur renvoyée par la fonction getUpdateFrequency().</p> <h1 id="arguments-27">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-23">Valeurs renvoyées</h1> <p>Dreamweaver attend une valeur booléenne : true si l'élement s'affiche, false si ce n'est pas le cas.</p> <h1 id="example-139">Example</h1> <pre><code class="language-javascript">function showif() { var retval = false; var dom = dw.getDocumentDOM(); if(dom) { var view = dom_viewView(); if.view == 'design') { retval = true; } } return retval; } </code></pre> <p>Macromedia Dreamweaver 8 gère deux types de rapport : les rapport de site et les rapporteuxonomes.</p> <h1 id="rapports-de-site">Rapports de site</h1> <p>Utilisez l'API de rapportes pour creer des rapportes de site personnalisés ou modifier le jeu de rapportes prédéfinis fournis avec Dreamweaver 8. Les rapportes de site sont accessibles uniquement à partir de la boîte de dialogue Rapports.</p> <p>Les rapportes de site sont localisés dans le dossier Dreamweaver Configuration/Reports. Ce dossier contient plusieurs sous-dossiers représentant les différentes catégories de rapport, chaque rapport ne pouvant appartenir qu'à une seule catégorie. Les noms de catégorie sont limités à 31 caractères. Chaque sous-dossier peut containir un fjichier nomme_foldername.txt. Si ce fjichier existe, Dreamweaver utilise son contenu comme nom de la catégorie. S'il n'existe pas, Dreamweaver utilise le nom du dossier.</p> <p>Lorsqu'un utilisateur désit plusieurs rapport de site dans la boîte de dialogue Rapports, Dreamweaver place tous les résultats dans la même fenêtre de résultats dans l'onglet Rapports du site du panneau Résultats. Dreamweaver remplace ces résultats la prochaine fois qu'un utilisateur exécute un rapport de site.</p> <p>Le tableau ci-dessous recense les fichiers utilisés pour creer un rapport de site :</p> <table><tr><td>Chemin</td><td>Fichier</td><td>Description</td></tr><tr><td>Configuration/Reports/{type/}</td><td>nom_rapport.js</td><td>Contient les fonctions requises pour générer le contenu du rapport.</td></tr><tr><td>Configuration/Reports/{type/}</td><td>nom_rapport.htm</td><td>Appelle les fichiers JavaScript appropriés. Définit l'interface utiliser (IU) de la boîte de dialogue Paramètres associée au rapport, le cas échéant.</td></tr><tr><td>Configuration/Reports/</td><td>Reports.js</td><td>Fournit les fonctions communes utilisées pour la génération de rapports.</td></tr></table> <h1 id="fonctionnement-des-rapport-de-site">Fonctionnement des rapport de site</h1> <ol> <li>Pour acceder aux rapport,CHOISSEZ Site > Rapports.Dans la boite de dialogue qui s'affiche, selectionnez les rapporta et executer sur des cibles specifiques. </li> <li>Sélectionnez les fichiers pour lesquels effectuer les rapport à l'aide du menu dérounant Rapport sur. Ce menu contient les commandes suivantes : Document actif, Site local en cours entier, Fichiers sélectionnés dans le site et Dossier. Lorsque vous sélectionnez la commande Dossier, un bouton Parcourir et un champ de texte s'affichent pour vous permettre deCHOISIR un dossier. </li> <li>Vous pouvez personnaliser des rapportes possedant des parametes en cliquant sur le bouton Parametes, puis en saisissant des valeurs pour ces parametes. Pour pouvoir définir vous-même des parametes, le rapport doit containir une boîte de dialogue Parametes. La définition de ces parametes est facultative ; il n'est pas nécessaire de définir les parametes de chaque rapport. Si un rapport ne possède pas de boîte de dialogue Parametes, le bouton Parametes est estompé lorsque vous sélectionnez le rapport dans la liste. </li> <li>Une fois le rapport sélectionné et les paramètres définis, vous cliquez sur le bouton Exéçuter.</li> </ol> <p>REMARQUE</p> <p>Si un rapport contient le gestionnaire preventFileActivity, Dreamweaver vous interdir d'executer toute tâche associée aux fichiers pendant l'exécution du rapport.</p> <p>Dreamweaver supprime alors tous les éléments de l'onglet Rapports du site dans le panneau Résultats. Dreamweaver appelle la fonction beginReporting() dans chaque rapport avant le début du processus de rapport. Si un rapport renvoie la valeur false à partir de cette fonction, celle-ci est retiree du processus de rapport.</p> <ol> <li>Chaque fisier est transmis à chaque rapport sélectionné dans la boîte de dialogue à l'aide de la fonction processFile(). Si le rapport doit inclure des informations sur ce fisier dans la liste des résultats, la fonction</li> </ol> <p>dw.resultsPalette.siteReports.addResultItem() doit être appelée. Le processus se poursuit jusqu'à ce que tous les fichiers sélectionnés par l'utilisateur soit traités ou jusqu'à ce que l'utilisateur clique sur le bouton Arrête situé au bas de la fenêtre. Dreamweaver affiche le nom de chaque:fichier en cours de traitement et le nombre de fichiers restant àtraiter.</p> <p>Dreamweaver appelle la fonction endReporting() dans chaque rapport à la fin du traitement des fichiers et du processus de rapport.</p> <h1 id="exemple-simple-de-rapport-de-site">Exemple simple de rapport de site</h1> <p>L'exemple d'extension simple recense toutes les images référencées dans un fichier spécifique, un site entier, des fichiers sélectionnés ou un dossier et affiche le rapport dans l'onglet Rapports du site de la fenêtre de résultats.</p> <p>You creez cette extension en executant les étapes suivantes :</p> <ul> <li>Création de la définition du rapport <br /> ■ Ecriture du code JavaScript</li> </ul> <p>Dans cet exemple, deux fischiers sont créés dans le dossier HTML Reports : listeImages.htm, qui contient la définition du rapport, et listeImages.js, qui contient le code JavaScript spécifique au rapport. Vous référencez en outre le filchier Reports.js, intégre à Dreamweaver.</p> <h1 id="création-de-la-définition-du-rapport">Création de la définition du rapport</h1> <p>La définition du rapport spécifique le nom du rapport tel qu'il s'affiche dans la boîte de dialogue Rapports, appelle tout fichier JavaScript requis et définit l'interface utiliser de la boîte de dialogue Paramètres, le cas échéant.</p> <h1 id="pour-creer-la-defini-tion-du-rapport">Pour creer la defini tion du rapport :</h1> <ol> <li>Créez le fichier Configuration/Reports/HTML Reports/listeImages.htm. </li> <li>Ajoutez le code ci-dessous pour indiquer le nom du rapport qui s'affichera dans la boîte de dialogue Rapports, dans le titre de la page HTML.</li> </ol> <pre><code class="language-txt"><html> <head> <title>List Images</title> </code></pre> <ol> <li>En fin de fichier, ajoutez la balise script et spécifie le fichier Reports.js dans l'attribut src. <script src="../Reports.js"></script> </li> <li>En fin de fichier, ajoutez une autre balise script et spécifiez le fichier listeImages.js, que vous allez créé à l'objet suivante, dans l'attribut src.</li> </ol> <pre><code class="language-html"><html> <head> <title>List Images</title> <script src="../Reports.js"></script> <script src="List Images.js"></script> </code></pre> <ol> <li>Fermez la balise head, insérez des balises body d'ouverture et de fermeture, puis fermez la balise html.</li> </ol> <pre><code class="language-html"></head> <body> </body> </html> </code></pre> <ol> <li>Enregistrez le fjichier sous le nom listeImages dans le dossier Configuration/Reports/HTML Reports.</li> </ol> <h1 id="ecriture-du-code-javascript-5">Ecriture du code JavaScript</h1> <p>Dreamweaver propose le fichier Reports.js, à partir duquel vous pouvez appeler toute fonction. Vous nevez cependant creer également le fichier JavaScript contenant toute fonction spécifique à votre rapport de site personnelisé.</p> <h1 id="pour-creer-le-fichier-javascript">Pour creer le fichier JavaScript :</h1> <ol> <li>Créez le fjichier Configuration/Reports/HTML Reports/listeImages.js et insérez le contenu ci-dessous :</li> </ol> <pre><code class="language-javascript">// Function: configureSettings // Description: Standard report API, used to initialize and load // the default values. Does not initialize the UI. // function configureSettings() { return false; } // Function: processFile // Description: Report command API called during file processing. // function processFile (fileURL) { if (!isHTMLType(fileURL)) //If the file isn't an HTML file return; //skip it. var curDOM = dw.getDocumentDOM(fileURL); // Variable for DOM </code></pre> <pre><code class="language-javascript">var tagList = curDOM-elementsByTagName('img'); // Variable for img tags var imgfilename; // Variable for file name specified in img tag for (var i=0; i < tagList.length; i++) { // For img tag list imgfilename = tagList[i].getAttribute('src'); // Get image filename if (imgfilename != null) { // If a filename is specified // Print the appropriate icon, HTML filename, // image filename, and line number reportItem(REP_ITEM.CustomOM, fileURL, imgfilename, curDOM.nodeToSourceViewOffsets(tagList[i]); } } </code></pre> <ol> <li>Enregistrez le fjichier sous le nom listeImages.js dans le dossier Configuration/Reports/HTML Reports.</li> </ol> <h1 id="rapports-autonomies">Rapports autonomies</h1> <p>Vou puez utilise l'API de fenêtre Résultats pour creer un rapport autonome. Les rapporte autonomes sont des commandes normales qui utilisent directement l'API de la fenêtre des résultats plus que l'API de rapports. Les rapporte autonomes sont accessibles de la même manière que les autres commandes, à partir des menus ou d'une autre commande.</p> <p>Les rapport aux propriétaires de la société (1985) est destiné à l'achat d'une commande. Les rapports autorisés sont destinés à l'achat d'une commande. Les commandes personalisées associées à un rapport autorisme figure dans le menu Commandes.</p> <p>Dreamweaver create une nouvelle fenêtre de résultats chaque fois que l'utilisateur exécute un nouveau rapport autonome.</p> <table><tr><td>Chemin</td><td>Fichier</td><td>Description</td></tr><tr><td>Configuration/Commands</td><td>nom Commands.htm</td><td>Définit l'interface utilisé de la boîte de dialogue qui s'affiche lorsque vous sélectionné la commande et contient le code JavaScript ou une ↔reference au fichier JavaScript qui exécutes les actions requises pour générer le rapport.</td></tr><tr><td>Configuration/Commands</td><td>nom Commands.js</td><td>Génére une fenêtre de résultats et y insère le rapport.</td></tr></table> <h1 id="fonctionnement-des-rapports-autonomes">Fonctionnement des rapports autonomes</h1> <ol> <li>La commande personalisée, que vous creez pour générer le rapport, ouvre une nouvelle fenêtre de résultats en appelant la fonction dw.createResultsWindow() et en stockant l'objet de résultats renvoyés dans une variable de fenêtre. Les fonctions restantes du processus doivent être appelées en tant que méthodes de cet objet. </li> <li>La commande personalisée initiaise le titre et le format de la fenêtre Résultats en appelant les fonctions setTitle() et SetColumnWidths() en tant que méthodes de l'objet de la fenêtre Résultats. </li> <li>La commande peut commencer immédiatement à ajouter des éléments dans la fenêtre Résultats en appelant la fonction addItem() ou à itérer une liste de fichiers en appelant les fonctions setFileList() et startProcessing() en tant que méthodes de l'objet de la fenêtre Résultats. </li> <li>Lorsque la commande appelle resWin.startProcessing(), Dreamweaver appelle la fonction processFile() pour chaque URL de filchier dans la liste. Définissez la fonction processFile() dans la commande autonome. Elle reçoit l'URL de filchier comme seul argument. Utilisez la fonction setCallbackCommands() de l'objet de la fenêtre Résultats si vous voulez que Dreamweaver appelle la fonction processFile() dans une autre commande. </li> <li>Pour appeler la fonction addItem(), la fonction processFile() doit avoir accès à la fenêtre de résultats créé par la commande autonome. La fonction processFile() peut également appeler la fonction stopProcessing() de l'objet de la fenêtre Résultats pour arrêter le traitement des fichiers de la liste.</li> </ol> <h1 id="exemple-de-rapport-autonome-simple">Exemple de rapport autonome simple</h1> <p>L'extension simple de rapport autonome recense les images référencées dans un filchier spécifique et affiche le rapport dans la fenêtre de résultats.</p> <p>Vous creez cette extension en executant les étapes suivantes :</p> <ol> <li>Création de l'interface utilisé de la boîte de dialogue </li> <li>Ecriture du code JavaScript</li> </ol> <p>Dans cet exemple, deux fischiers sont créé dans le dossier Configuration/Commands : listeImages.htm, qui définit l'interface utiliser de la boîte de dialogue qui s'affiche lorsque vous scélectionné la commande personalisée, et listeImages.js, qui contient le code JavaScript spécifique au rapport.</p> <h1 id="création-de-linterface-utilisateur-de-la-boîte-de-dialogue">Création de l'interface utilisateur de la boîte de dialogue</h1> <p>La balise BODY du fichier HTML spécifique le contenu de la boite de dialogue qui s'affiche lorsque l'utilisateur selectionne la commande personalisée et appelle tout fichier JavaScript requis.</p> <h1 id="pour-creer-le-fichier-html-2">Pour creer le fichier HTML :</h1> <ol> <li>Créez le fichier Configuration/Commands/listeImages.htm. </li> <li>Insérez le code ci-dessous dans le fichier listeImages.htm :</li> </ol> <pre><code class="language-html"><html> <head> <title>Standalone report example</title> <script src="Listimages.js"> </script> </head> <body> <div name="test"> <form name="myForm"> <table> <tr> <td>Click OK to display the standalone report.</td> </tr> </table> </form> </div> </body> </code></pre> <ol> <li>Enregistrez le fjichier sous le nom listeImages.htm dans le dossier Configuration/Commands.</li> </ol> <h1 id="ecriture-du-code-javascript-6">Ecriture du code JavaScript</h1> <p>Créez ensuite le fichier JavaScript contenant les fonctions spécifiques à votre rapporteur autonome.</p> <h1 id="pour-creer-le-fichier-javascript-2">Pour creer le fichier JavaScript :</h1> <ol> <li>Créez le fjichier listeImages.js dans le dossier Configuration/Commands et insérez-y le code suivant :</li> </ol> <pre><code class="language-javascript">function stdaloneresulttwin() { var curDOM = dw.getDocumentDOM("document"); var tagList = curDOM.getElementsByTagName('img'); var imgfilename; var iOffset = 0; var iLineNumber = 0; </code></pre> <p>var resWin dw.createResultsWindow("Images in File", - ["Line", "Image"]); <br /> for(var i=0; i<tagList.length; i++) <br /> { //Get the name of the source file. imgfilename = tagList[i].getAttribute('src'); //Get the character offset from the start of the file //to the start of the img tag. iOffset curDOM.nodeToOffsets(curDOM/images[i]); //Based on the offset, figure out what line in the file //the img tag is on. iLineNumber curDOM-LineFromOffset(iOffset[O]); //As long as the src attribute specifies a file name, if (imgfilename ! = null) { // display the line number, and image path. resWin.addItem(resWin,"0","Images in Current File",null,- null,null,[iLineNumber,imgfilename]); } } return; <br /> } <br /> //add buttons to dialog function commandButtons() { return new Array("OK","stdaloneresulttwin()”,"Cancel", "window.close()); <br /> }</p> <ol> <li>Enregistrez le fichier sous le nom listeImages.js dans le dossier Configuration/Commands.</li> </ol> <p><h1 id="api-de-rapports">API de rapports</h1></p> <p>La fonction processFile() est la seule fonction obligatoire pour l'API de rapport. Toutes les autres fonctions sont facultatives.</p> <h1 id="processfile">processFile()</h1> <p>Disponibilité</p> <p>Dreamweaver 4.</p> <h1 id="description-123">Description</h1> <p>Cette fonction est appelée lorsqu'un fjichier doit être traité. La commande Rapport doitTRAITER le fjichier sans le modifier et utiliser la fonction dw. Results Palette. Site Reports(), addResultItem() ou resWin addItem() pour renvoyer des informations sur ce fjichier. Dreamweaver publie automatiquement le DOM de chaque fjichier lorsque le traitement est fini.</p> <h1 id="arguments-28">Arguments</h1> <p>strFilePath</p> <p>L'argument strFilePath est le nom et le chemin complet du fichier àtraiter.</p> <h1 id="valeurs-renvoyées-24">Valeurs renvoyées</h1> <p>Dreamweaver n'attend rien.</p> <h1 id="beginreporting">beginReporting()</h1> <h1 id="disponibilité-12">Disponibilité</h1> <p>Dreamweaver 4.</p> <h1 id="description-124">Description</h1> <p>Cette fonction est appelée au début du processus de rapport, avant l'exécution du rapport. Si la commande Rapport renvoie la valeur false à partir de la fonction, la commande Rapport est exclue du processus de rapport.</p> <h1 id="arguments-29">Arguments</h1> <p>target</p> <p>L'argument target est une chaine indiquant la cible de la session de rapport. Il peut prendre l'une des valeurs suivantes : "CurrentDoc", "CurrentSite", "CurrentSiteSelection" (pour les fichiers sélectionnés dans un site), ou "Folder: + le chemin vers le dossier sélectionné par l'utilisateur" (par exemple, "Folder:c:temp").</p> <h1 id="valeurs-renvoyees-5">Valeurs renvoyees</h1> <p>Dreamweaver attend une valeur booléenne : true si le rapport s'exécute avec succès, false si target est exclu du processus de rapport.</p> <h1 id="endreporting">endReporting()</h1> <h1 id="disponibilité-13">Disponibilité</h1> <p>Dreamweaver 4.</p> <h1 id="description-125">Description</h1> <p>Cette fonction est appelée à la fin du processus de rapport.</p> <h1 id="arguments-30">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-25">Valeurs renvoyées</h1> <p>Dreamweaver n'attend rien.</p> <h1 id="commandbuttons-3">commandButtons()</h1> <h1 id="disponibilité-14">Disponibilité</h1> <p>Dreamweaver 4.</p> <h1 id="description-126">Description</h1> <p>Définit les boutons devant figurer dans la partie droite de la boîte de dialogue Options et leur comportement lorsque l'utilisateur clique dessus. Si cette fonction n'est pas définie, aucun bouton n'apparait et la section BODY du fichier de rapport s'étend de façon à replir la totalité de la boîte de dialogue.</p> <h1 id="arguments-31">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-26">Valeurs renvoyées</h1> <p>Dreamweaver attend un tableau contenant un nombre pair d' éléments. Le premier élément est une châte ne contenant le libellé du premier bouton. Le deuxième élément est une châte de code JavaScript définitissant le comportement du premier bouton lorsque l'utiliseur clique dessus. Les autres éléments définitissant les boutons supplémentaires de la même manière.</p> <h1 id="example-140">Example</h1> <p>Dans l'exemple suivant, la fonction commandButtons() définit trois boutons: OK, Annuler et Aide.</p> <pre><code class="language-javascript">function commandButtons(){ return new Array("OK", "doCommand()", "Cancel", - </code></pre> <pre><code class="language-javascript">"window.close()”,"Help","showHelp())”; </code></pre> <h1 id="configuresettings">configureSettings()</h1> <h1 id="disponibilité-15">Disponibilité</h1> <p>Dreamweaver 4.</p> <h1 id="description-127">Description</h1> <p>Déterminé si le bouton Paramètres du rapport doit être activé dans la boîte de dialogue Rapports lorsqu'un rapport est sélectionné.</p> <h1 id="arguments-32">Arguments</h1> <p>Néant</p> <h1 id="valeurs-renvoyées-27">Valeurs renvoyées</h1> <p>Dreamweaver attend une valeur booléenne : true si le bouton Paramètres de rapport doit être activé ; false dans le cas contraire.</p> <h1 id="windowdimensions-3">windowDimensions()</h1> <h1 id="disponibilité-16">Disponibilité</h1> <p>Dreamweaver 4.</p> <h1 id="description-128">Description</h1> <p>Définit les dimensions de la boîte de dialogue des paramètres. Si cette fonction n'est pas définie, les dimensions de la fenêtre sont calculées automatiquement.</p> <p>Ne définisse cette fonction que si vous souhaitez utiliser une boîte de dialogue Options ayant des dimensions supérieures à 640 x 480 pixels.</p> <h1 id="arguments-33">Arguments</h1> <p>platform</p> <ul> <li>La valeur de l'argument platform est soit "macintosh", soit "windows", selon la plate-forme utilisé par l'utilisateur.</li> </ul> <h1 id="valeurs-renvoyées-28">Valeurs renvoyées</h1> <p>Dreamweaver attend une chaîne au format "widthInPixels, heightInPixels".</p> <p>Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone des boutons Valider et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaitre toutes les options, des barres de défilament s'affichent.</p> <h1 id="example-141">Example</h1> <p>Dans l'exemple suivant, la fonction windowDimensions() définit les dimensions de la boîte de dialogue Paramètres à 648 x 520 pixels :</p> <pre><code class="language-txt">function windowDimensions(){ return "648,520"; } </code></pre> <h1 id="bibliothèques-etéditeurs-de-balises">Bibliothèques etéditeurs de balises</h1> <p>11</p> <p>Les utilisateurs de Macromedia Dreamweaver 8 peuvent utiliser des éditeurs de balises pour insérer de nouvelles balises, modifier des balises existantes et acceder aux informations de référence sur les balises. Dreamweaver propose des éditeurs pour les langages suivants : HTML, ASP.Net, CFML, JRun et JSP. Vous pouvez personnaliser ces éditeurs et en creer de nouveaux, ou ajouter de nouvelles balises aux bibliothèques de balises.</p> <p>Le sélecteur de balises utilise les informations enregistrées dans les bibliothèques de balises pour permettre aux utilisateurs de Dreamweaver de passer en revue les balises disponibles, de les selectionner et de les insérer dans le document en cours.</p> <p>Dreamweaver enregistre les informations sur chaque balise, y compris leurs attributs, dans un groupe de sous-dossiers localisés dans le dossier Configuration/TagLibraries. Les fonctions de l'éditeur de balises et du selecteur de balises utilisent les informations enregistrées dans ces dossiers lors de la manipulation et de la modification des balises. Avant de vous lancer dans la création d'éditeurs de balises personalisés, vous nevez comprendre la structure de la bibliothèque de balises.</p> <p>Le tableau ci-dessous recense les fichiers utilisés pour creer une bibliothèque de balises :</p> <table><tr><td>Chemin</td><td>Fichier</td><td>Description</td></tr><tr><td>Configuration/TagLibraries/</td><td>TagLibraries.vtm</td><td>Recense chaque balise installée.</td></tr><tr><td>Configuration/TagLibraries/language/</td><td>tag.vtm</td><td>Inclut des informations sur les balises, tels les attributs correspondants, et indique si la balise est associée à une balise de fermeture, ainsi que les règles de mise en forme.</td></tr><tr><td>Configuration/TagLibraries/language/</td><td>Tagimagefile.gif</td><td>Fichier facultatif à afficher dans l'inspecteur de propriétés.</td></tr></table> <h1 id="format-de-fichier-bibliothèque-de-balises">Format de fichier bibliothèque de balises</h1> <p>La bibliothèque de balises est composée d'un fjichier racine, du fjichier TagLibraries.vtm, contenant la liste des balises installées, et d'un fjichier VTML pour chaque balise dans la bibliothèque. Le fjichier TagLibraries.vtm fonctionne comme une table des matières et contient des pointeurs vers le fjichier VTML de chaque balise. La figure suivante présente l'organisation des fjichiers VTML dans Dreamweaver, par langage de balisage :</p> <p><img alt="" src="images/39c4f6de6f20d0e3b21cda094bc75efea294cdc0e0f189e364a9768168d85b63.jpg" /></p> <p>Les utilisateurs de Macromedia HomeSite peuvent reconnaître la structure des fischiers VTML, mais Dreamweaver n'utilise pas ces fischiers de la même manière que HomeSite. La différence la plus importante est que Dreamweaver contient son propre programme de rendu HTML pour l'affichage des interfaces utiliser (UI) des extensions, et n'utilise donc pas les fischiers Dreamweaver VTML dans le processus de rendu de l'interface graphique utilisé.</p> <p>L'exemple suivant presente la structure du fichier TagLibraries.vtm :</p> <p><taglibraries> <br /> <taglibrary name "Name of tag library" doypes "HTML, ASP-JS, ASP-VB" tagchooser "relative path to Tagchooser.xm1 file" id "DWTagLibrary_html"> <tagref name "tag name" file "relative path to tag .vtm file"/> <br /> </taglibrary></p> <p><taglibraryname "CFML Tags" doypes "ColdFusion" servermodel "Cold Fusion" tagchooser "cfml/TagChoser.xm1" id "DWTagLibrary_cfm1"> <tagref name "cfabort" file "cfml/cfabort.vtm"/> <br /> </taglibrary> <br /> <taglibraryname "ASP.NET Tags" dotypes "ASP.NET_CSharp,ASP.NET_VB"servermodel "ASPNet" prefix = "<asp:" tagchooser "ASPNet/TagChoser.xm1" id="DWTagLibrary_aspnet"> <tagref name "dataset" file "aspnet/dataset.vtm" prefix = "<mm:dataset"/> <br /> </taglibrary> <br /> </taglibraries></p> <p>La balise taglibrary regroupe une ou plusieurs balises dans une bibliothèque de balises. Lorsque vous importez des balises ou créez un nouveau jeu de balises, vous pouvez les regrouper dans des bibliothèques de balises. Souvent, un regroupement taglibrary correspond à un ensemble de balises qui sont définies dans un fichier TLD de pages JSP (JavaServer Pages), un fichier DTD (Document Type Definition) de format XML, un espace de nom ASP.Net ou dans tout autre regroupement logique.</p> <p>Le tableau suivant presente les attributs taglibrary:</p> <table><tr><td>Attribut</td><td>Description</td><td>Obligatoire/ facultatif</td></tr><tr><td>taglibrary.name</td><td>Utilisé pour réféencer la bibliothèque de balises dans l'interface utiliser.</td><td>Obligatoire</td></tr><tr><td>taglibrary.doctypes</td><td>Indique les types de documents pour lesquels cette bibliothèque est active. Lorsque la bibliothèque est active, les balises de bibliothèque s'affichent dans le menu contextuel Indicateurs de code. Les bibliothèques de balises ne peuvent pas toutes été actives en même temps car des conflicts de nom risquent de survenir (par exemple, les fichiers HTML et WML ne sont pas compatibles).</td><td>Obligatoire</td></tr><tr><td>taglibrary_prefix</td><td>Lorsque cet attribut est spécifique, les balises dans la bibliothèque de balises prennten la forme taglibrary_prefix + tagref.name. Par exampie, si taglibrary_prefix est "<jrun:" et tagref.name est "if", la balise prend la forme "<jrun:if". Cet attribut peut être ignoré pour une balise définie.</td><td>Facultatif</td></tr><tr><td>taglibraryservermodel</td><td>Si les balises dans la bibliothèque de balises s'exécutent sur un serveur d'application, l'attribut servermodel identifie le modèle serveur de la balise. S'il s'agit de balises)côté client (et non de balises côté serveur), l'attribut servermodel est ignoré. L'attribut servermodel est utilisé également pour vérifier les navigateurs cibles.</td><td>Facultatif</td></tr><tr><td>taglibrary.id</td><td>Cet attribut peut être une chaînequelconquedifférente des attributs taglibrary.ID desautres bibliothèques de balises du fichier. Extension Manager utilise l'attribut ID afin delaisser aux fichiers MXP la possibilité d'insérerde nouveaux taglibrary et fichiers tags dans lefichier TagLibraries.vtm.</td><td>Facultatif</td></tr><tr><td>taglibrary.tagchooser</td><td>Un chemin relatif au fichier TagChooser.xml associé à cette bibliothèque de balises.</td><td>Facultatif</td></tr></table> <p>Le tableau suivant presente les attributs tagref : </p> <table><tr><td>Attribut</td><td>Description</td><td>Obligatoire/ facultatif</td></tr><tr><td>tagref.name</td><td>Utilisé pour réféencer la balise dans l'interface utilisateur.</td><td>Obligatoire</td></tr><tr><td>tagref_prefix</td><td>Indique comment doit s'afficher la balise en mode Source. Lorsqu'il est utilisé, l'attribut tagref_prefix déterminé le préfixe de la balise en cours. Lorsqu'il est défini, il remplace la valeur spécifique pour l'attribut taglibraryprefix.</td><td>Facultatif</td></tr><tr><td>tagref.file</td><td>Référence le fichier VTML de la balise.</td><td>Facultatif</td></tr></table> <p>L'attribut tagref_prefix pouvant remplacer la valeur de l'attribut taglibraryprefix,la relation entre ces deux attributs peut préter à confusion. Le tableau suivant montre la relation entre les attributs taglibrary_prefix et tagref_prefix :</p> <table><tr><td>L'attributtaglibraryRARY_prefix est-ildéfini?</td><td>L'attribut tagref_prefixest-il défini?</td><td>Préfixede balise obtenu</td></tr><tr><td>Non</td><td>Non</td><td>‘<’ + tagref.name</td></tr><tr><td>Oui</td><td>Non</td><td>taglibraryRARY_prefix +tagref.name</td></tr><tr><td>Non</td><td>Oui</td><td>tagref_prefix</td></tr><tr><td>Oui</td><td>Oui</td><td>tagref_prefix</td></tr></table> <p>Pour définiir les balises, Dreamweaver utilise une version modifiée du format de fichier VTML de Macromedia. L'exemple suivant présente tous les éléments que Dreamweaver doit utiliser pour définiir une balise individuelle :</p> <p><tag name="input" bind="value" casesensitive="no" endtag="no"> <tagformat indentcontents="yes" formatcontents="yes" nlbeforetag nlbeforecontents = 0 nlaftercontents = 0 nlaftertag = 1 /> <br /> <tagdialog file = "input.HTM"/> <br /> <attributes> <attrib name = "name"/> <attrib name = "wrap" type = "Enumerated"> <attrboption value = "off"/> <attrboption value = "soft"/> <attrboption value = "hard"/> </attrib> <attrib name = "onFocus" casesensitive = "yes"/> <event name = "onFocus"/> </attributes> <br /> </tag></p> <p>Le tableau suivant presente les attributs de définition des balises :</p> <table><tr><td>Attribut</td><td>Description</td><td>Obligatoire/ facultatif</td></tr><tr><td>tag.bind</td><td>Utilisé par le panneau Liaisons de données. Lorsque vous sélectionné une balise de ce type, l'attribut bind indique l'attribut par défaut pour la liaison des données.</td><td>Facultatif</td></tr><tr><td>tag.casesensitive</td><td>Indique si le nom de la balise doit respecter la casse. Si le nom de la balise doit respecter la casse, il est inséré dans le document de l'utilisateur exactement comme spécifique dans la bibliothèque de balises. S'il n'est pas necessaire de respecter la casse, le nom de la balise est inséré en utilisant la casse par défaut specifiée dans l'onglet Format de code de la boîte de dialogue Préférences. Si vous ne specifie pas l'attribut casesensitive, la balise ne tient pas compte des majuscules et des minuscules.</td><td>Facultatif</td></tr><tr><td>tag.endtag</td><td>Spécifie si la balise dispose d'une balise d'ouverture et d'une balise de fermeture. Par exemple, la balise input ne comporte pas de balise de fermeture. Il n'existe pas de balise / input correspondante. Si la balise de fermeture est facultative, l'attribut ENDTAG doit étr être défini sur Yes. Spécifiez xml pour appliquer la syntaxe XML à une valise vide. Par exemple, <tag name="foo" endtag="xml" tagtype="empty">insère <foo/>.</td><td>Facultatif</td></tr><tr><td>tagformat</td><td>Indique les règles de mise en forme de la balise. Dans les versions antérieures à Dreamweaver MX, les règles de mise en forme étaiten enregistrées dans le fjichier SourceFormat.txt.</td><td>Facultatif</td></tr><tr><td>tagformat.indentcontents</td><td>Indique si le contenu de cette balise doit être mis en retrait.</td><td>Facultatif</td></tr><tr><td>tagformat.formatcontents</td><td>Indique si le contenu de cette balise doit être analyse. Cet attribut est défini sur No pour les balises telles que SCRIPT et STYLE, dans lesquelles le contenu n'est pas du code HTML.</td><td>Facultatif</td></tr><tr><td>tagformat.nlbeforetag</td><td>Le nombre de caractères de nouvelle ligne devant être insérés avant cette balise.</td><td>Facultatif</td></tr><tr><td>tagformat.nlbeforecontents</td><td>Le nombre de caractères de nouvelle ligne devant être insérés avant le contenu de cette balise.</td><td>Facultatif</td></tr><tr><td>tagformat.nlaftercontents</td><td>Le nombre de caractères de nouvelle ligne devant être insérés après le contenu de cette balise.</td><td>Facultatif</td></tr><tr><td>tagformat.nlaftertag</td><td>Le nombre de caractères de nouvelle ligne devant être insérés après cette balise.</td><td>Facultatif</td></tr><tr><td>attrib.name</td><td>Le nom de l'attribut, tel qu'il apparait dans le code source.</td><td>Obligatoire</td></tr><tr><td>attrib.type</td><td>S'il n'est pas définit, l'attribut attrib.type est "text".Cet attribut peut prendre les valeurs suivantes :TEXT-contenu texte libreENUMERATED-liste de valeurs énuméréesCOLOR-valeur de couleur (nom ou hex)FONT-nom de police ou famille de policesSTYLE-attribut de styles CSSCSSSTYLE-nom de classe CSSCSSID-ID de classe CSSFILEPATH-chemin de fichier completDIRECTORY-chemin de dossierFILENAME-nom de fichier uniquementRELATIVEPATH-représentation relative ducheminfLAG-attribut ON/OFF qui ne contient pas del valeur</td><td>Facultatif</td></tr><tr><td>attrib.casesensitive</td><td>Indique si le nom de l'attribut doit respecter la casse. Si l'attribut CASESENSITIVE est absent, le nom de l'attribut ne tient pas compte desmajuscules et des minuscules.</td><td>Facultatif</td></tr></table> <h1 id="remarque-20">REMARQUE</h1> <p>Dans les versions antérieures à Dreamweaver MX, les informations sur les balises sont enregistrées dans le fichier Configuration/TagAttributeList.txt.</p> <h1 id="sélecteur-de-balises">Sélecteur de balises</h1> <p>Le sélecteur de balises vous permet d'afficher les balises dans des groupes fonctionnels et d'accederrapidementauxbalises fréquemmentutilisées.Pourajouter une balise ou un groupe de balises dans le sélecteur de balises,vousdevezd'abordlesajouter dans la bibliothèque de balises. Vous pouvezeffectuer cette opération à l'aide de la boîte de dialogue Editeur de la bibliothèque de balises ou eninstallant une extension Dreamweaver, empaquetée dans un fichier MXP.</p> <h1 id="fichiers-tagchooserxml">Fichiers Tagchooser.xml</h1> <p>Le fichier Tagchooser.xml contient les métadonnées utilisées pour organiser les regroupements de balises qui apparaissent dans le sélection de balises. Chaque balise livrée avec Dreamweaver est enregistrée dans un regroupement fonctionnel, et est disponible dans le sélection de balises. Vous pouvez regrouper les balises existantes et créé des groupes de nouvelles balises en modifiant le fichier Tagchooser.xml. Vous pouvez également personnelier la structure des balises en créé des sous-catégories pour permettre aux utilisateurs d'acceder facilement aux balises les plus importantes pour leur travail.</p> <p>Le fichier TagLibraries.vtm prend en charge l'utilisation de l'attribut</p> <p>TAGLIBRARY. TAGCHOoser, qui pointe vers le fichier Tagchooser.xml. Si vous modifie les fichiers Tagchooser.xml existants ou si vous en creez de nouveaux, l'attribut</p> <p>TAGLIBRARY. TAGCHOoser doit pointer vers l'emplacement exact du selecteur de balises pour pouvoir fonctionner correctement.</p> <p>S'il n'existe pas d'attribut TAGLIBRARY. TAGCHOoser, le selecteur de balises affiche l'arborescence définie dans le TagLibraries.vtm.</p> <p>Les fichiers TagChooser.xml résident dans le dossier Configuration/TagLibraries/</p> <p>TagLibraryName. L'exemple suivant présente la structure des fichiers TagChooser.xml :</p> <pre><code class="language-xml"><?xml version="1.0" encoding="iso-8859-1" standalone="yes"?> <tlibrary name="Friendly name for library node" desc="Description for incorporated reference" reference="Language[,Topic[,Subtopic]]"> <category name="Friendly name for category node" desc="Description for incorporated reference" reference="Language[,Topic[,Subtopic]]" id="Unique id"> <category name="Friendly name for subcategory node" ICON="Relative path" desc="Description for incorporated reference" reference="Language,Topic[,Subtopic]" id="Unique id"> -element name="Friendly name for list item" value="Value to pass to visual dialog editors' desc='Description for incorporated reference' reference="Language[,Topic[,Subtopic]]" id="Unique id"/> ... more elements to display in the list view ... </category> </code></pre> <pre><code class="language-txt">... more subcategories .. </category> ... more categories .. </tclibrary> </code></pre> <p>Le tableau suivant presente les balises pouvant etre utilisées dans les fichiers TagChooser.xml :</p> <table><tr><td>Balise</td><td>Description</td><td>Obligatoire/ facultatif</td></tr><tr><td>tclibrary</td><td>Balise extérieure qui encapsule cette structure de séclecteur de balises de la bibliothèque de balises.</td><td>Obligatoire</td></tr><tr><td>tclibrary.name</td><td>Cette valeur s'affiche dans le nœud Arborescence.</td><td>Obligatoire</td></tr><tr><td>tclibrarydesc</td><td>Cette valeur est une chaîne HTML qui s'affiche dans la sectionInfos sur les balises de la boîte de dialogue Sélecteur de balises. S'il n'existe pas d'attribut DESC, les informationsInfos sur les balises proviennent du panneau Rétérence. Interchangeable avec tclibrary.reference.</td><td>Facultatif desc et reference sont mutuellesment exclusives)</td></tr><tr><td>tclibrary.reference</td><td>Cette valeur décrit le langage, la rubrique et la sous-rubrique à afficher dans la sectionInfos sur les balises de la boîte de dialogue Sélecteur de balises. Interchangeable avec tclibrary DESC.</td><td>Facultatif desc et reference sont mutuellesment exclusives)</td></tr></table> <p>La balise CATEGORY représenté tous les autres nœuds dans l'arborescence sous le nœud de la balise TCLIBRARY, comme illustré dans le tableau suivant :</p> <table><tr><td>Balise</td><td>Description</td><td>Obligatoire/ facultatif</td></tr><tr><td>category.name</td><td>Cette valeur s'affiche dans le nœud Arborescence.</td><td>Obligatoire</td></tr><tr><td>category desc</td><td>Cette valeur est une chaîne HTML qui s'affiche dans la sectionInfos sur les balises de la boîte de dialogue Sélecteur de balises. Si dés ou reference attr ne sont pas spécifique, rien ne s'affiche dans la sectionInfos sur les balises.</td><td>Facultatif desc et reference sont mutuellesment exclusives)</td></tr><tr><td>category reference</td><td>Cette valeur décrit le langage, la rubrique et la sous-rubrique à afficher dans la sectionInfos sur les balises.</td><td>Facultatif desc et reference sont mutuellesment exclusives)</td></tr><tr><td>Balisé</td><td>Description</td><td>Obligatoire/facultatif</td></tr><tr><td>category icon</td><td>Cette valeur est un chemin relatif vers un fichierGIF d'icône.</td><td>Facultatif</td></tr><tr><td>category.id</td><td>Toute chaîne différente des attributs category.iddes autres catégories dans ce fichier.</td><td>Obligatoire</td></tr></table> <p>Le tableau suivant répertorie les attributs de la balise ELEMENT, qui représenté la balise à insérer :</p> <table><tr><td>Attribut</td><td>Description</td><td>Obligatoire/ facultatif</td></tr><tr><td>element.name</td><td>Cette valeur s'affiche comme un élément de liste.</td><td>Obligatoire</td></tr><tr><td>element.value</td><td>Une valeur placée directement dans le code ou un paramètre qui est transmis vers les boîtes de dialogue visuelles.</td><td>Obligatoire</td></tr><tr><td>element desc</td><td>Cette valeur est une chaîne HTML et s'affiche dans le panneau Rétérence incorpore. S'il n'est pas spécifique, l'attribut RÉFERENCE affiche le contenu de la référence dans le panneau Rétérénce incorpore.</td><td>Facultatif (desc et reference sont mutuellesment exclusives)</td></tr><tr><td>element.reference</td><td>Jusqu'à trois chaînes, séparées par des virgules, dérivant respectivement le langage, la rubrique et la sous-rubrique. Ces informations s'affichent dans le panneau Rétéréonce. La première chaîne est obligatoire. La deuxième chaîne est obligatoire pour la balise ELEMENT seulement et facultative pour les balises CATEGORY et TCLIBRARY. La troisième chaîne est facultative.</td><td>Facultatif (desc et reference sont mutuellesment exclusives)</td></tr><tr><td>element.id</td><td>Toute chaîne différente des attributs element.id des autres éléments dans ce fischier.</td><td>Facultatif</td></tr></table> <h1 id="exemple-simple-de-création-dun-éditeur-de-balise">Exemple simple de création d'un éditeur de balise</h1> <p>Les exemples dans cette section utilisent cfweather, une balise ColdFusion conçue pour extraire la température courante à partir d'une base de données météorologiques, et illustrent les étapes nécessaires à la création d'un nouvel éditeur de balises.</p> <p>Les attributs de la balise cfweather sont décrites dans le tableau suivant :</p> <table><tr><td>Attribut</td><td>Description</td></tr><tr><td>zip</td><td>Un code postal de cinq chiffres</td></tr><tr><td>tempaturescale</td><td>L'échelle de température (Celsius ou Fahrenheit)</td></tr></table> <p>Pour creer cet editeur de balise, executez les etapes suivantes :</p> <p>Enregistrement de la balise dans la bibliothèque de balises <br /> - Création d'un fisquier de définition de balise (VTML) <br /> - Création d'une interface utilisateur d'éditeur de balises <br /> Ajout d'une balise au sélecteur de balises</p> <h1 id="enregistrement-de-la-balise-dans-la-bibliothèque-de-balises">Enregistrement de la balise dans la bibliothèque de balises</h1> <p>Afin que Dreamweaver puisse reconnaître la nouvelle balise, celle-ci doit être identifiée dans le filchier TagLibraries.vtm, localisé dans le dossier Configuration/TagLibraries. Néanmoins, sur une plate-forme multi-utilisateurs (par exemple, Windows XP, Windows 2000, Windows NT ou Mac OS X), un autre filchier TagLibraries.vtm réside dans le dossier Configuration de l'utilisateur. C'est ce filchier qui doit être mis à jour car il s'agit de l'instance que Dreamweaver recherche et analyse.</p> <p>L'emplacement du dossier Configuration varie selon la plate-forme utiliser.</p> <p>Sous Windows 2000 et Windows XP :</p> <pre><code class="language-batch"><drive>:\Documents and Settings\<username>\Application Data\Macromedia\Dreamweaver 8\Configuration </code></pre> <p>Sous Windows XP, ce dossier peut se couver dans un dossier masqué.</p> <p>Pour Mac OS X:</p> <p><drive>:Users:<username>:Library:Application Support: Macromedia:Dreamweaver 8:Configuration</p> <p>Si Dreamweaver ne parvient pas à tracer le fisquier TagLibraries.vtm dans le dossier Configuration de l'utilisateur, il effectue une recherche dans le dossier Configuration de Dreamweaver.</p> <h1 id="remarque-21">REMARQUE</h1> <p>Sur les plates-formes multiutilisateur, si vous modifiez la copie du filchier TagLibraries.vtm résident dans le dossier Configuration de Dreamweaver, au lieu de modifier celle qui se trouve dans le dossier de configuration de l'utilisateur, Dreamweaver ne prend pas en charge les modifications. En effet, Dreamweaver analyse la copie du filchier TagLibraries.vtm située dans le dossier de configuration de l'utilisateur, et non pas celle située dans le dossier Configuration de Dreamweaver.</p> <p>cfweather est une balise ColdFusion. Vous pouvez donc enregister la balise cfweather dans le groupe de bibliothèque de balises correspondant qui existe déjà.</p> <h1 id="pour-enregistrer-la-balise">Pour enregistrer la balise :</h1> <ol> <li>Ouvrez le fichier TagLibraries.vtm dans l'éditeur de texte. </li> <li>Faites défilier les bibliothèques de balises existantes jusqu'à localiser le groupe taglibRARY de balises CFML. </li> <li>Ajoutez un élément de référence de balise, comme indiqué dans l'exemple suivant : <tagref name="cfweather" file="cfml/CFweather.vtm"/> </li> <li>Enregistrez le fichier.</li> </ol> <p>La balise est maintainant enregistrée dans la bibliothèque de balises et contient un pointeur vers le fichier de définition de balise cfweather.vtm.</p> <h1 id="creation-dun-fichier-de-définition-de-balise-vtml">Creation d'un fichier de définition de balise (VTML)</h1> <p>Lorsqu'un utilisateur selectionne une balise enregistrée à l'aide du selecteur de balises ou d'un éditeur de balises, Dreamweaver recherche un fichier VTML correspondant pour la définition de la balise.</p> <h1 id="pour-creer-un-fichier-de-definition-de-balise">Pour creer un fichier de definition de balise :</h1> <ol> <li>Dans un éditeur de texte, créez un fisier contenant les éléments suivants :</li> </ol> <pre><code class="language-xml"><TAG NAME="cfweather" endtag="no"> <TAGFORMAT NLBEFORETAG="1" NLAFTERTAG="1"/> <TAGDIALOG FILE="cfweather.htm"/> </ATTRIBUTES> <ATTRIB NAME="zip" TYPE="TEXT"/> <ATTRIB NAME="tempaturescale" TYPE="ENUMERATED"> <ATTRIBOPTION VALUE="Celsius"/> <ATTRIBOPTION VALUE="Fahrenheit"/> </ATTRIB> </code></pre> <pre><code class="language-txt"></ATTRIBUTES> </TAG> </code></pre> <ol> <li>Enregistrez le fjichier cfweather.vtm dans le dossier Configuration/Taglibraries/CFML. Le fjichier de definition de balise permet à Dreamweaver d'executer les opérations de code contextualuel, de finalisation de code et de mise en forme pour la balise cfweather.</li> </ol> <h1 id="creation-dune-interface-utilisateur-déditeur-de-balises">Creation d'une interface utilisateur d'éditeur de balises</h1> <h1 id="pour-creator-linterface-utiliseateur-de-léditeur-de-balises-cfweather">Pour creator l'interface utiliseateur de l'éditeur de balises cfweather :</h1> <ol> <li>Enregistrez le fichier cfweather.htm dans le dossier Configuration/Taglibraries/CFML :</li> </ol> <!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0// dialog"> <html> <head> <title>CFWEATHER
Sommaire Cliquez un titre pour y accéder
Assistant notice
Powered by Anthropic
En attente de votre message
Informations produit

Marque : MACROMEDIA

Modèle : DREAMWEAVER 8-EXTENSION DE DREAMWEAVER

Catégorie : Développement Web